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

style : update style

Browse Source
This commit is contained in:
lukman
2024-09-25 17:29:31 +08:00
parent fa3c715974
commit 7f072786ba
5 changed files with 117 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/module/calender/ui/create_user_calender.tsx
View File

@@ -4,9 +4,9 @@ import { useParams, useRouter } from 'next/navigation';
import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from '@/module/division_new'; import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from '@/module/division_new';
import { useHookstate } from '@hookstate/core'; import { useHookstate } from '@hookstate/core';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import { useShallowEffect } from '@mantine/hooks'; import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global'; import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Text, TextInput } from '@mantine/core'; import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Stack, Text, TextInput } from '@mantine/core';
import { FaCheck } from 'react-icons/fa6'; import { FaCheck } from 'react-icons/fa6';
import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2'; import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
import { IoArrowBackOutline, IoClose } from 'react-icons/io5'; import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
@@ -23,6 +23,7 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
const [onClickSearch, setOnClickSearch] = useState(false) const [onClickSearch, setOnClickSearch] = useState(false)
const [searchQuery, setSearchQuery] = useState('') const [searchQuery, setSearchQuery] = useState('')
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 438px)");
async function getData() { async function getData() {
try { try {
@@ -208,38 +209,58 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
)} )}
</Box> </Box>
<Box p={20}> <Box p={20} mt={80}>
<Group justify="space-between" mt={100} onClick={handleSelectAll}> {/* <Group justify="space-between" mt={100} onClick={handleSelectAll}>
<Text c={tema.get().utama} fw={"bold"}> <Text c={tema.get().utama} fw={"bold"}>
Pilih Semua Anggota Pilih Semua Anggota
</Text> </Text>
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""} {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Group> </Group> */}
{loading ? {loading ?
Array(8) Array(8)
.fill(null) .fill(null)
.map((_, i) => ( .map((_, i) => (
<Box key={i}> <Box key={i}>
<SkeletonSingle /> <SkeletonList />
</Box> </Box>
)) ))
: :
(isData.length === 0) ?
<Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
</Stack>
:
<Box mt={20} mb={100}> <Box mt={20} mb={100}>
{isData.map((v, i) => { {isData.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser); const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
return ( return (
<Box mb={15} key={i} onClick={() => handleFileClick(i)}> <Box mb={15} key={i} onClick={() => handleFileClick(i)}>
<Grid align='center' gutter={{ <Grid align='center'>
base: 60, <Grid.Col
xl: "xs" span={{
}}> 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}`} alt="it's me" size="lg" /> <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
</Grid.Col> </Grid.Col>
<Grid.Col span={10}> <Grid.Col
span={{
base: 11,
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={isMobile2 ? 40 : 30}>{v.name}</Text>
</Flex> </Flex>
{isSelected ? <FaCheck /> : null} {isSelected ? <FaCheck /> : null}
</Flex> </Flex>

51
src/module/calender/ui/create_user_detail_calender.tsx
View File

@@ -3,9 +3,9 @@ import React, { useState } from 'react';
import { useParams, useRouter } from 'next/navigation'; import { useParams, useRouter } from 'next/navigation';
import { funGetSearchMemberDivision, IDataMemberDivision } from '@/module/division_new'; import { funGetSearchMemberDivision, IDataMemberDivision } from '@/module/division_new';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import { useShallowEffect } from '@mantine/hooks'; import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global'; import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Text, TextInput } from '@mantine/core'; import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Stack, Text, TextInput } from '@mantine/core';
import { FaCheck } from 'react-icons/fa6'; import { FaCheck } from 'react-icons/fa6';
import { HiMagnifyingGlass } from 'react-icons/hi2'; import { HiMagnifyingGlass } from 'react-icons/hi2';
import { IoArrowBackOutline, IoClose } from 'react-icons/io5'; import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
@@ -26,6 +26,7 @@ export default function CreateUserDetailCalender() {
const [onClickSearch, setOnClickSearch] = useState(false) const [onClickSearch, setOnClickSearch] = useState(false)
const [searchQuery, setSearchQuery] = useState('') const [searchQuery, setSearchQuery] = useState('')
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 438px)");
async function getData() { async function getData() {
try { try {
@@ -215,40 +216,60 @@ export default function CreateUserDetailCalender() {
)} )}
</Box> </Box>
<Box p={20}> <Box p={20} mt={80}>
<Group justify="space-between" mt={100} onClick={handleSelectAll}> {/* <Group justify="space-between" mt={100} onClick={handleSelectAll}>
<Text c={tema.get().utama} fw={"bold"}> <Text c={tema.get().utama} fw={"bold"}>
Pilih Semua Anggota Pilih Semua Anggota
</Text> </Text>
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""} {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Group> </Group> */}
{loading ? {loading ?
Array(8) Array(8)
.fill(null) .fill(null)
.map((_, i) => ( .map((_, i) => (
<Box key={i}> <Box key={i}>
<SkeletonSingle /> <SkeletonList />
</Box> </Box>
)) ))
: :
(isData.length === 0) ?
<Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
</Stack>
:
<Box mt={20} mb={100}> <Box mt={20} mb={100}>
{isData.map((v, i) => { {isData.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser); const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
const found = isDataAnggota.some((i: any) => i.idUser == v.idUser) const found = isDataAnggota.some((i: any) => i.idUser == v.idUser)
return ( return (
<Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}> <Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}>
<Grid align='center' gutter={{ <Grid align='center'>
base: 60, <Grid.Col
xl: "xs" span={{
}}> 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}`} alt="it's me" size="lg" /> <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
</Grid.Col> </Grid.Col>
<Grid.Col span={10}> <Grid.Col
span={{
base: 11,
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={isMobile2 ? 40 : 30}>{v.name}</Text>
<Text c={"dimmed"} lineClamp={1}>{(found) ? "sudah menjadi anggota" : ""}</Text> <Text c={"dimmed"} lineClamp={1} pl={isMobile2 ? 40 : 30}>{(found) ? "sudah menjadi anggota" : ""}</Text>
</Flex> </Flex>
{isSelected ? <FaCheck /> : null} {isSelected ? <FaCheck /> : null}
</Flex> </Flex>

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

@@ -62,7 +62,7 @@ export default function HistoryDivisionCalender() {
<Box bg={tema.get().bgTotalKegiatan} style={{ <Box bg={tema.get().bgTotalKegiatan} style={{
borderRadius: 10, borderRadius: 10,
padding: 20 padding: 20
}}> }} h={"100vh"}>
{loading ? {loading ?
Array(6) Array(6)
.fill(null) .fill(null)
@@ -90,7 +90,7 @@ export default function HistoryDivisionCalender() {
_.isEmpty(isData) _.isEmpty(isData)
? ?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}> <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada history</Text> <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Acara</Text>
</Box> </Box>
: :
isData.map((v, i) => { isData.map((v, i) => {

4
src/module/discussion/ui/form_create_discussion.tsx
View File

@@ -70,7 +70,7 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
return ( return (
<Box > <Box >
<Box p={20} > <Box p={20} >
<Grid gutter={0} pt={10}> <Grid pt={10}>
<Grid.Col span={2}> <Grid.Col span={2}>
<Avatar src={img} alt="it's me" size="lg" /> <Avatar src={img} alt="it's me" size="lg" />
</Grid.Col> </Grid.Col>
@@ -82,7 +82,7 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
input: { input: {
border: 'none', border: 'none',
backgroundColor: 'transparent', backgroundColor: 'transparent',
height: "70vh" height: "50vh"
} }
}} }}
value={isData.desc} value={isData.desc}

2
src/module/discussion/ui/form_edit_discussion.tsx
View File

@@ -107,7 +107,7 @@ export default function FormEditDiscussion() {
input: { input: {
border: 'none', border: 'none',
backgroundColor: 'transparent', backgroundColor: 'transparent',
height: "70vh" height: "50vh"
} }
}} }}
value={isDataOne} value={isDataOne}