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

style : update revisi style

Browse Source
This commit is contained in:
lukman
2024-09-25 12:17:27 +08:00
parent edaa4b2362
commit 75218f5dc3
15 changed files with 441 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/module/division_new/ui/create_anggota_division.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { funGetUserByCookies } from '@/module/auth';
import { funGetAllmember, TypeUser } from '@/module/user';
@@ -9,7 +9,7 @@ import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { FaCheck } from 'react-icons/fa6';
import { HiMagnifyingGlass } from 'react-icons/hi2';
import { useShallowEffect } from '@mantine/hooks';
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';
@@ -28,6 +28,7 @@ export default function CreateAnggotaDivision() {
const [loading, setLoading] = useState(true)
const [onClickSearch, setOnClickSearch] = useState(false)
const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 438px)");
const handleFileClick = (index: number) => {
if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
@@ -185,10 +186,15 @@ export default function CreateAnggotaDivision() {
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonSingle />
<SkeletonList />
</Box>
))
:
(dataMember.length === 0) ?
<Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
</Stack>
:
<Box pt={90} mb={100}>
{dataMember.map((v: any, index: any) => {
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id)
@@ -196,14 +202,32 @@ export default function CreateAnggotaDivision() {
return (
<Box my={10} key={index} onClick={() => (!found) ? handleFileClick(index) : null}>
<Grid align='center' >
<Grid.Col span={2}>
<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}`} alt="it's me" size="lg" />
</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 direction={'column'} align="flex-start" justify="flex-start">
<Text pl={{ base: 10, xl: 0 }} lineClamp={1}>{v.name}</Text>
<Text pl={{ base: 10, xl: 0 }} c={"dimmed"} lineClamp={1}>{(found) ? "sudah menjadi anggota divisi" : ""}</Text>
<Text pl={isMobile2 ? 40 : 30} lineClamp={1}>{v.name}</Text>
<Text pl={isMobile2 ? 40 : 30} c={"dimmed"} lineClamp={1}>{(found) ? "sudah menjadi anggota divisi" : ""}</Text>
</Flex>
{isSelected ? <FaCheck /> : null}
</Flex>

4
src/module/division_new/ui/create_division.tsx
View File

@@ -125,7 +125,7 @@ export default function CreateDivision() {
label="Grup"
size="md"
required
radius={40}
radius={10}
data={dataGroup?.map((pro: any) => ({
value: String(pro.id),
label: pro.name
@@ -148,7 +148,7 @@ export default function CreateDivision() {
label="Nama Divisi"
size="md"
required
radius={40}
radius={10}
value={body.name}
onChange={(val) => { setBody({ ...body, name: val.target.value }) }}
onBlur={() => setTouched({ ...touched, name: true })}

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

@@ -33,7 +33,7 @@ export default function DrawerDetailDivision() {
<TbReportAnalytics size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama}>Report Divisi</Text>
<Text c={tema.get().utama}>Laporan Divisi</Text>
</Box>
</Flex>
</SimpleGrid>

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

@@ -9,7 +9,7 @@ export default function EventReport({ data, tgl }: { data: IDataReportDivision[]
return (
<Box>
<Text mb={20} mt={10} ta={'center'} fw={"bold"}>EVENT <br /> {tgl}</Text>
<Text mb={20} mt={10} ta={'center'} fw={"bold"}>ACARA <br /> {tgl}</Text>
{
_.isEmpty(data)
?

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

@@ -1,5 +1,5 @@
"use client"
import { globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
import { globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
import { ActionIcon, Avatar, Box, Button, Divider, Flex, Grid, Group, Skeleton, Stack, Text } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { useParams, useRouter } from 'next/navigation';
@@ -150,30 +150,16 @@ export default function InformationDivision() {
</Box>
<Box mt={15}>
{loading ?
<Group
align="center"
style={{
border: `1px solid ${"#DCEED8"}`,
padding: 10,
borderRadius: 10,
cursor: "pointer",
}}
>
<Box>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={50}
radius={100}
aria-label="icon"
>
<Skeleton height={25} width={25} />
</ActionIcon>
</Box>
<Box>
<Skeleton height={20} width={100} />
</Box>
</Group>
<Box>
<Grid p={10} align="center">
<Grid.Col span={2}>
<Skeleton w={50} h={50} radius={100} />
</Grid.Col>
<Grid.Col span={9}>
<Skeleton w={"80%"} h={20} />
</Grid.Col>
</Grid>
</Box>
:
((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || isAdmin) ?
@@ -193,7 +179,7 @@ export default function InformationDivision() {
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonSingle />
<SkeletonList />
</Box>
))
: member.map((v, i) => {

28
src/module/division_new/ui/list_division.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { currentScroll, globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
import { currentScroll, globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput, Title } from '@mantine/core';
import { useRouter, useSearchParams } from 'next/navigation';
import React, { useEffect, useState } from 'react';
@@ -12,6 +12,7 @@ import { IDataDivison } from '../lib/type_division';
import { funGetAllDivision } from '../lib/api_division';
import toast from 'react-hot-toast';
import { useHookstate } from '@hookstate/core';
import _ from 'lodash';
export default function ListDivision() {
const [isList, setIsList] = useState(false)
@@ -138,18 +139,12 @@ export default function ListDivision() {
</Grid>
<Box pt={20}>
{roleLogin.get() == 'supadmin' && <Text>Filter by: {nameGroup}</Text>}
{loading ?
<>
<Skeleton width={"100%"} height={100} radius={"md"} />
</>
:
<Box bg={tema.get().utama} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={'white'}>Total Divisi</Text>
<Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={tema.get().utama}>Total Divisi</Text>
<Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={'white'}>{jumlah}</Text>
<Text fz={40} fw={'bold'} c={tema.get().utama}>{jumlah}</Text>
</Flex>
</Box>
}
</Box>
{isList ? (
<Box pt={20}>
@@ -158,10 +153,16 @@ export default function ListDivision() {
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonSingle />
<SkeletonList/>
</Box>
))
:
_.isEmpty(data)
?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Divisi</Text>
</Box>
:
data?.map((v: any, i: any) => {
return (
<Box key={i}>
@@ -181,11 +182,6 @@ export default function ListDivision() {
size={50}
aria-label="Gradient action icon"
radius={100}
// gradient={{
// from: '#DFDA7C',
// to: '#F2AF46',
// deg: 174
// }}
bg={tema.get().bgFiturHome}
>
<HiMiniUserGroup size={25} color={tema.get().utama} />

8
src/module/division_new/ui/navbar_admin_division.tsx
View File

@@ -48,7 +48,7 @@ export default function NavbarAdminDivision({ data, onSuccess }: { data: any, on
</Box>
} />
<Box p={20}>
<TextInput
{/* <TextInput
styles={{
input: {
color: tema.get().utama,
@@ -60,8 +60,8 @@ export default function NavbarAdminDivision({ data, onSuccess }: { data: any, on
radius={30}
leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian"
/>
<Box pt={20}>
/> */}
<Box mb={100}>
<Checkbox.Group value={value} onChange={setValue}>
{
(member.length === 0) ? (
@@ -91,7 +91,7 @@ export default function NavbarAdminDivision({ data, onSuccess }: { data: any, on
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
<Divider my={10} />
</Box>
</Box>
);

245
src/module/division_new/ui/navbar_create_users.tsx
View File

@@ -1,8 +1,8 @@
"use client"
import { LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Indicator, Input, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
@@ -23,6 +23,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
const [loading, setLoading] = useState(true)
const [onClickSearch, setOnClickSearch] = useState(false)
const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 438px)");
const handleFileClick = (index: number) => {
if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
@@ -88,123 +89,141 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="search">
<HiMagnifyingGlass size={20} color='white' />
</ActionIcon>} />
{/* SEARCH */}
{onClickSearch
? (
<Box
pos={'fixed'} top={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 9999,
backgroundColor: `${tema.get().utama}`,
borderBottomLeftRadius: 20,
borderBottomRightRadius: 20,
}}>
<Grid justify='center' align='center' gutter={'lg'}>
<Grid.Col span={1}>
<ActionIcon onClick={handleClose} variant="subtle" color='white' size="lg" mt={5} radius="lg" aria-label="search">
<IoArrowBackOutline size={30} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={11}>
<TextInput
styles={{
input: {
color: "white",
borderRadius: '#A3A3A3',
borderColor: `${tema.get().utama}`,
backgroundColor: `${tema.get().utama}`,
},
}}
size="md"
radius={30}
placeholder="Pencarian"
onChange={(e) => loadData(e.target.value)}
/>
</Grid.Col>
</Grid>
</Box>
)
: null
}
{/* Close User */}
<Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 100,
backgroundColor: `${tema.get().bgUtama}`,
borderBottom: `1px solid ${"#E0DFDF"}`
}}>
{selectedFiles.length > 0 ? (
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
{selectedFiles.map((v: any, i: any) => {
return (
<Carousel.Slide key={i}>
<Box w={{
base: 70,
xl: 70
}}
onClick={() => { handleXMember(v.idUser) }}
>
<Center>
<Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
<Avatar style={{
border: `2px solid ${tema.get().utama}`
}} src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
</Indicator>
</Center>
<Text ta={"center"} lineClamp={1}>{v.name}</Text>
</Box>
</Carousel.Slide>
)
})}
</Carousel>
) : (
<Box h={rem(81)}>
<Flex justify={"center"} align={'center'} h={"100%"}>
<Text ta={'center'} fz={14}>Tidak ada anggota yang dipilih</Text>
</Flex>
</Box>
)}
</Box>
{/* SEARCH */}
{onClickSearch
? (
<Box
pos={'fixed'} top={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 9999,
backgroundColor: `${tema.get().utama}`,
borderBottomLeftRadius: 20,
borderBottomRightRadius: 20,
}}>
<Grid justify='center' align='center' gutter={'lg'}>
<Grid.Col span={1}>
<ActionIcon onClick={handleClose} variant="subtle" color='white' size="lg" mt={5} radius="lg" aria-label="search">
<IoArrowBackOutline size={30} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={11}>
<TextInput
styles={{
input: {
color: "white",
borderRadius: '#A3A3A3',
borderColor: `${tema.get().utama}`,
backgroundColor: `${tema.get().utama}`,
},
}}
size="md"
radius={30}
placeholder="Pencarian"
onChange={(e) => loadData(e.target.value)}
/>
</Grid.Col>
</Grid>
</Box>
)
: null
}
{/* Close User */}
<Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 100,
backgroundColor: `${tema.get().bgUtama}`,
borderBottom: `1px solid ${"#E0DFDF"}`
}}>
{selectedFiles.length > 0 ? (
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
{selectedFiles.map((v: any, i: any) => {
return (
<Carousel.Slide key={i}>
<Box w={{
base: 70,
xl: 70
}}
onClick={() => { handleXMember(v.idUser) }}
>
<Center>
<Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
<Avatar style={{
border: `2px solid ${tema.get().utama}`
}} src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
</Indicator>
</Center>
<Text ta={"center"} lineClamp={1}>{v.name}</Text>
</Box>
</Carousel.Slide>
)
})}
</Carousel>
) : (
<Box h={rem(81)}>
<Flex justify={"center"} align={'center'} h={"100%"}>
<Text ta={'center'} fz={14}>Tidak ada anggota yang dipilih</Text>
</Flex>
</Box>
)}
</Box>
<Box p={20}>
<Stack>
<Box pt={100} mb={100}>
{loading ?
Array(6)
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonSingle />
</Box>
))
: dataMember.map((v, index) => {
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
return (
<Box mb={15} key={index} onClick={() => handleFileClick(index)}>
<Grid align='center'>
<Grid.Col span={{
base: 3,
xl: 2
}}>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
</Grid.Col>
<Grid.Col span={{
base: 9,
xl: 10
}}>
<Flex justify='space-between' align={"center"}>
<Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1}>{v.name}</Text>
</Flex>
{isSelected ? <FaCheck /> : null}
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonList />
</Box>
);
})
))
:
(dataMember.length === 0) ?
<Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
</Stack>
:
dataMember.map((v, index) => {
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
return (
<Box mb={10} key={index} onClick={() => handleFileClick(index)}>
<Grid 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}`} alt="it's me" size="lg" />
</Grid.Col>
<Grid.Col
span={{
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} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
</Flex>
{isSelected ? <FaCheck /> : null}
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider my={10} />
</Box>
</Box>
);
})
}
</Box>
</Stack>