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 { useParams, useRouter } from 'next/navigation';
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={{
borderRadius: 10
}} h={113}>
<Group>
<Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
<Flex direction={'column'}>
<Text fz={isMobile ? 14 : 16}>{event.timeStart} - {event.timeEnd}</Text>
<Box w={{
base: isMobile ? 220 : 280,
xl: 430
}}>
<Grid align='center'>
<Grid.Col span={{
base: 0.5,
xs: 0.5,
sm: 0.5,
md: 0.5,
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}>
{_.startCase(event.title)}
</Text>
</Box>
<Box w={{
base: isMobile ? 230 : 280,
xl: 420
}}>
<Text lineClamp={1}>
Dibuat oleh : {event.user_name}
</Text>
</Box>
</Flex>
</Group>
</Flex>
</Grid.Col>
</Grid>
</Box>
</Box>
)

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

@@ -1,6 +1,6 @@
'use client'
import { LayoutDrawer, LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
import { ActionIcon, Avatar, Box, CopyButton, Divider, Flex, Grid, Group, SimpleGrid, Skeleton, Spoiler, Stack, Text, Tooltip } from '@mantine/core';
import { LayoutDrawer, LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
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 { BsCalendar2Event, BsCalendarDate } from 'react-icons/bs';
import { MdEventNote, MdOutlineFormatListBulleted } from "react-icons/md";
@@ -11,7 +11,7 @@ import { HiMenu } from 'react-icons/hi';
import DrawerDetailEvent from './drawer_detail_event';
import { useParams, useRouter } from 'next/navigation';
import { funDeleteMemberCalender, funGetOneCalender } from '../lib/api_calender';
import { useShallowEffect } from '@mantine/hooks';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import moment from "moment";
import "moment/locale/id";
import { IDataDetailByIdCalender, IDataDetailByIdMember } from '../lib/type_calender';
@@ -33,6 +33,8 @@ export default function DetailEventDivision() {
const router = useRouter()
const [dataChoose, setDataChoose] = useState({ id: '', name: '' })
const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 460px)");
const isMobile = useMediaQuery('(max-width: 369px)');
const getData = async () => {
@@ -89,60 +91,116 @@ export default function DetailEventDivision() {
borderRadius: 10
}}>
<Stack>
<Grid gutter={"lg"}>
<Grid.Col span={{
base: 2,
xl: 1
}}>
<BsCalendar2Event size={25} color={tema.get().utama} />
<Grid align='center'>
<Grid.Col
span={{
base: 1.5,
xs: 1.5,
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 span={{
base: 10,
xl: 11
}}>
<Text>{isDataCalender?.title}</Text>
<Grid.Col
span={{
base: 10.5,
xs: 10.5,
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>
<Grid gutter={"lg"}>
<Grid.Col span={{
base: 2,
xl: 1
}}>
<BsCalendarDate size={25} color={tema.get().utama} />
<Grid>
<Grid.Col
span={{
base: 1.5,
xs: 1.5,
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 span={{
base: 10,
xl: 11
}}>
<Text>{moment(isDataCalender?.dateStart).format('LL')}</Text>
<Grid.Col
span={{
base: 10.5,
xs: 10.5,
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>
<Grid gutter={"lg"}>
<Grid.Col span={{
base: 2,
xl: 1
}}>
<LuClock size={25} color={tema.get().utama} />
<Grid>
<Grid.Col
span={{
base: 1.5,
xs: 1.5,
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 span={{
base: 10,
xl: 11
}}>
<Text>{isDataCalender?.timeStart} | {isDataCalender?.timeEnd} </Text>
<Grid.Col
span={{
base: 10.5,
xs: 10.5,
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>
<Grid gutter={"lg"}>
<Grid.Col span={{
base: 2,
xl: 1
}}>
<BsCalendarDate size={25} color={tema.get().utama} />
<Grid>
<Grid.Col
span={{
base: 1.5,
xs: 1.5,
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 span={{
base: 10,
xl: 11
}}>
<Text>
<Grid.Col
span={{
base: 10.5,
xs: 10.5,
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() === 'daily' ? 'Setiap Hari' :
// isDataCalender?.repeatEventTyper.toString() === 'weekdays' ? 'Hari Kerja (senin - jumat)' :
@@ -153,24 +211,38 @@ export default function DetailEventDivision() {
</Text>
</Grid.Col>
</Grid>
<Grid gutter={"lg"}>
<Grid.Col span={{
base: 2,
xl: 1
}}>
<LuLink size={25} color={tema.get().utama} />
<Grid>
<Grid.Col
span={{
base: 1.5,
xs: 1.5,
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 span={{
base: 10,
xl: 11
}}>
<Grid.Col
span={{
base: 10.5,
xs: 10.5,
sm: 10.5,
md: 10.5,
lg: 10.5,
xl: 10.5,
}}
>
{isDataCalender?.linkMeet ? (
<Group justify='space-between'>
<Box w={{
base: 170,
xl: 380
}}>
<Text lineClamp={1}>{isDataCalender?.linkMeet}</Text>
<Text lineClamp={1} pl={isMobile2 ? 5 : 0}>{isDataCalender?.linkMeet}</Text>
</Box>
<CopyButton value={String(isDataCalender?.linkMeet)} timeout={2000}>
{({ copied, copy }) => (
@@ -192,20 +264,34 @@ export default function DetailEventDivision() {
}
</Grid.Col>
</Grid>
<Grid gutter={"lg"}>
<Grid.Col span={{
base: 2,
xl: 1
}}>
<MdOutlineFormatListBulleted size={25} color={tema.get().utama} />
<Grid>
<Grid.Col
span={{
base: 1.5,
xs: 1.5,
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 span={{
base: 10,
xl: 11
}}>
<Grid.Col
span={{
base: 10.5,
xs: 10.5,
sm: 10.5,
md: 10.5,
lg: 10.5,
xl: 10.5,
}}
>
{isDataCalender?.desc ? (
<Spoiler maxHeight={80} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text>{isDataCalender?.desc}</Text>
<Text pl={isMobile2 ? 5 : 0}>{isDataCalender?.desc}</Text>
</Spoiler>
) : (
<Text>-</Text>
@@ -225,8 +311,8 @@ export default function DetailEventDivision() {
border: `1px solid ${"#C7D6E8"}`,
borderRadius: 10,
}}
p={10}
px={20}
pb={20}
>
{Array(4)
.fill(null)
@@ -234,7 +320,7 @@ export default function DetailEventDivision() {
<Box
key={i}
>
<SkeletonSingle />
<SkeletonList/>
</Box>
))}
</Box>
@@ -252,8 +338,8 @@ export default function DetailEventDivision() {
border: `1px solid ${"#C7D6E8"}`,
borderRadius: 10,
}}
p={10}
px={20}
pt={20}
>
{
isLengthMember == 0 ? (
@@ -270,21 +356,29 @@ export default function DetailEventDivision() {
setOpenDrawerUser(true)
}} key={i}>
<Box my={10}>
<Grid align='center' gutter={"lg"}>
<Grid align='center'>
<Grid.Col span={{
base: 3,
xl: 2
base: 1,
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 span={{
base: 9,
xl: 10
base: 11,
xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}>
<Flex justify='space-between' align={"center"}>
<Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1}>{v.name}</Text>
<Text c={"#5A687D"} fz={14} lineClamp={1}>
<Text lineClamp={1} pl={isMobile ? 35 : 40}>{v.name}</Text>
<Text c={"#5A687D"} fz={14} lineClamp={1} pl={isMobile ? 35 : 40}>
{v.email}
</Text>
</Flex>
@@ -319,7 +413,7 @@ export default function DetailEventDivision() {
onClick={() => { router.push('/member/' + dataChoose.id) }}
justify={'center'} align={'center'} direction={'column'} >
<Box>
<FaUser size={30} color={tema.get().utama} />
<FaUser size={25} color={tema.get().utama} />
</Box>
<Box>
<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'} >
<Box>
<IoIosCloseCircle size={30} color={tema.get().utama} />
<IoIosCloseCircle size={25} color={tema.get().utama} />
</Box>
<Box>
<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 [loading, setLoading] = useState(true)
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 [isPage, setPage] = useState(1)
@@ -122,41 +123,38 @@ export default function HistoryDivisionCalender() {
return (
<Box bg={tema.get().bgTotalKegiatan} style={{
borderRadius: 10,
}} mb={20} p={20} key={i}>
}} mb={20} p={15} key={i}>
<Grid
style={{
alignContent: 'flex-start',
alignItems: 'flex-start',
}}
align={isData.length <= 1 ? "center" : "flex-start"}
>
<Grid.Col span={{
base: isMobile ? 4 : 3,
sm: 3,
xs: 3,
md: 3,
lg: 3,
xl: 3
}}>
base: isMobile2 ? 2.5 : 2,
xs: 2,
sm: 2,
md: 2,
lg: 2,
xl: 2,
}}>
<Flex justify={"center"} direction={'column'}>
<Text ta={"center"} fz={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 ? 16 : 20} fw={'bold'}>{moment(v.dateStart).format('D MMM')}</Text>
<Text ta={"center"} fz={ isMobile ? 13 : 15}>{moment(v.dateStart).format('dddd')}</Text>
</Flex>
</Grid.Col>
<Grid.Col span={{
base: isMobile ? 8 : 9,
md: 9,
lg: 9,
xl: 9,
sm: 9,
xs: 9
}}>
base: isMobile2 ? 9.5 : 10,
xs: 10,
sm: 10,
md: 10,
lg: 10,
xl: 10,
}}>
{v.data.map((d, x) => {
return (
<Box mb={9} key={x}
<Box mb={10} key={x}
onClick={() => router.push(`/division/${param.id}/calender/${d.id}`)}
>
<Text fw={"bold"} lineClamp={1}>{d.title}</Text>
<Text>{d.timeStart} | {d.timeEnd}</Text>
<Text fw={"bold"} fz={isMobile ? 13 : 16} lineClamp={1}>{d.title}</Text>
<Text fz={isMobile ? 13 : 16}>{d.timeStart} | {d.timeEnd}</Text>
</Box>
)
})}

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

@@ -238,7 +238,7 @@ export default function NavbarCreateDivisionCalender() {
size="md"
disabled
placeholder='Jumlah pengulangan'
value={isData.repeatValue}
value={"1"}
onChange={(event) => {
setData({ ...isData, repeatValue: String(event.currentTarget.value) })
setTouched({ ...touched, repeatValue: false })
@@ -265,6 +265,7 @@ export default function NavbarCreateDivisionCalender() {
size="md"
placeholder='Jumlah pengulangan'
value={isData.repeatValue}
min={1}
onChange={(event) => {
setData({ ...isData, repeatValue: String(event.currentTarget.value) })
setTouched({ ...touched, repeatValue: false })
@@ -273,8 +274,8 @@ export default function NavbarCreateDivisionCalender() {
// TODO :: NANTI DIPERBAIKI
error={
touched.repeatValue && (
isData.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : ""
// || Number(isData.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh 0" : ""
isData.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" :
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"
disabled
placeholder='Jumlah pengulangan'
defaultValue={isDataCalender?.repeatValue}
defaultValue={"1"}
onChange={(event) => {
setDataCalender({ ...isDataCalender, repeatValue: String(event.currentTarget.value) })
setTouched({ ...touched, repeatValue: false })
@@ -314,6 +314,7 @@ export default function UpdateDivisionCalender() {
required
label="Jumlah pengulangan"
size="md"
min={1}
placeholder='Jumlah pengulangan'
defaultValue={isDataCalender?.repeatValue}
onChange={(event) => {
@@ -323,8 +324,8 @@ export default function UpdateDivisionCalender() {
onBlur={() => setTouched({ ...touched, repeatValue: true })}
error={
touched.repeatValue && (
isDataCalender?.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : null
// || Number(isDataCalender?.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh dibawah 1" : null
isDataCalender?.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" :
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 (
<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
cols={{ base: 2, sm: 2, lg: 2 }}
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 roleLogin = useHookstate(globalRole)
const [isAdmin, setAdmin] = useState(false)
const isMobile = useMediaQuery('(max-width: 369px)');
const isMobile = useMediaQuery('(max-width: 455px)');
const tema = useHookstate(TEMA)
async function getOneData() {
@@ -175,7 +175,7 @@ export default function InformationDivision() {
<Box pt={10}>
<Box mb={10}>
{loading
? Array(3)
? Array(6)
.fill(null)
.map((_, i) => (
<Box key={i}>
@@ -193,18 +193,13 @@ export default function InformationDivision() {
}
}}
>
<Grid.Col span={9}>
<Group>
<Grid.Col span={1}>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
<Box w={{
base: isMobile ? 130 : 140,
xl: 270
}}>
<Text c={tema.get().utama} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
</Grid.Col>
<Grid.Col span={8}>
<Text c={tema.get().utama} fw={"bold"} truncate="end" pl={isMobile ? 25 : 30} fz={isMobile ? 14 : 16}>
{v.name}
</Text>
</Box>
</Group>
</Grid.Col>
<Grid.Col span={3}>
<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
w={{
base: 220,
xl: 400
xl: 500
}}
>
<Text fw={"bold"} c={tema.get().utama} lineClamp={1}>