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" "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 LayoutModal from '@/module/_global/layout/layout_modal';
import { funGetUserByCookies } from '@/module/auth'; import { funGetUserByCookies } from '@/module/auth';
import { funGetAllmember, TypeUser } from '@/module/user'; import { funGetAllmember, TypeUser } from '@/module/user';
@@ -9,7 +9,7 @@ import React, { useState } from 'react';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
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 { useShallowEffect } from '@mantine/hooks'; import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { IDataMemberDivision } from '../lib/type_division'; import { IDataMemberDivision } from '../lib/type_division';
import { funAddDivisionMember, funGetDivisionById } from '../lib/api_division'; import { funAddDivisionMember, funGetDivisionById } from '../lib/api_division';
import { IoArrowBackOutline, IoClose } from 'react-icons/io5'; import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
@@ -28,6 +28,7 @@ export default function CreateAnggotaDivision() {
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [onClickSearch, setOnClickSearch] = useState(false) const [onClickSearch, setOnClickSearch] = useState(false)
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 438px)");
const handleFileClick = (index: number) => { const handleFileClick = (index: number) => {
if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) { if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
@@ -185,10 +186,15 @@ export default function CreateAnggotaDivision() {
.fill(null) .fill(null)
.map((_, i) => ( .map((_, i) => (
<Box key={i}> <Box key={i}>
<SkeletonSingle /> <SkeletonList />
</Box> </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}> <Box pt={90} mb={100}>
{dataMember.map((v: any, index: any) => { {dataMember.map((v: any, index: any) => {
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id) const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id)
@@ -196,14 +202,32 @@ export default function CreateAnggotaDivision() {
return ( return (
<Box my={10} key={index} onClick={() => (!found) ? handleFileClick(index) : null}> <Box my={10} key={index} onClick={() => (!found) ? handleFileClick(index) : null}>
<Grid align='center' > <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" /> <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 pl={{ base: 10, xl: 0 }} lineClamp={1}>{v.name}</Text> <Text pl={isMobile2 ? 40 : 30} 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} c={"dimmed"} lineClamp={1}>{(found) ? "sudah menjadi anggota divisi" : ""}</Text>
</Flex> </Flex>
{isSelected ? <FaCheck /> : null} {isSelected ? <FaCheck /> : null}
</Flex> </Flex>

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

@@ -125,7 +125,7 @@ export default function CreateDivision() {
label="Grup" label="Grup"
size="md" size="md"
required required
radius={40} radius={10}
data={dataGroup?.map((pro: any) => ({ data={dataGroup?.map((pro: any) => ({
value: String(pro.id), value: String(pro.id),
label: pro.name label: pro.name
@@ -148,7 +148,7 @@ export default function CreateDivision() {
label="Nama Divisi" label="Nama Divisi"
size="md" size="md"
required required
radius={40} radius={10}
value={body.name} value={body.name}
onChange={(val) => { setBody({ ...body, name: val.target.value }) }} onChange={(val) => { setBody({ ...body, name: val.target.value }) }}
onBlur={() => setTouched({ ...touched, name: true })} 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} /> <TbReportAnalytics size={30} color={tema.get().utama} />
</Box> </Box>
<Box> <Box>
<Text c={tema.get().utama}>Report Divisi</Text> <Text c={tema.get().utama}>Laporan Divisi</Text>
</Box> </Box>
</Flex> </Flex>
</SimpleGrid> </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 ( return (
<Box> <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) _.isEmpty(data)
? ?

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

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

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

@@ -1,5 +1,5 @@
'use client' '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 { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput, Title } from '@mantine/core';
import { useRouter, useSearchParams } from 'next/navigation'; import { useRouter, useSearchParams } from 'next/navigation';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
@@ -12,6 +12,7 @@ import { IDataDivison } from '../lib/type_division';
import { funGetAllDivision } from '../lib/api_division'; import { funGetAllDivision } from '../lib/api_division';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import { useHookstate } from '@hookstate/core'; import { useHookstate } from '@hookstate/core';
import _ from 'lodash';
export default function ListDivision() { export default function ListDivision() {
const [isList, setIsList] = useState(false) const [isList, setIsList] = useState(false)
@@ -138,18 +139,12 @@ export default function ListDivision() {
</Grid> </Grid>
<Box pt={20}> <Box pt={20}>
{roleLogin.get() == 'supadmin' && <Text>Filter by: {nameGroup}</Text>} {roleLogin.get() == 'supadmin' && <Text>Filter by: {nameGroup}</Text>}
{loading ? <Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}>
<> <Text fw={'bold'} c={tema.get().utama}>Total Divisi</Text>
<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>
<Flex justify={'center'} align={'center'} h={'100%'}> <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> </Flex>
</Box> </Box>
}
</Box> </Box>
{isList ? ( {isList ? (
<Box pt={20}> <Box pt={20}>
@@ -158,10 +153,16 @@ export default function ListDivision() {
.fill(null) .fill(null)
.map((_, i) => ( .map((_, i) => (
<Box key={i}> <Box key={i}>
<SkeletonSingle /> <SkeletonList/>
</Box> </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) => { data?.map((v: any, i: any) => {
return ( return (
<Box key={i}> <Box key={i}>
@@ -181,11 +182,6 @@ export default function ListDivision() {
size={50} size={50}
aria-label="Gradient action icon" aria-label="Gradient action icon"
radius={100} radius={100}
// gradient={{
// from: '#DFDA7C',
// to: '#F2AF46',
// deg: 174
// }}
bg={tema.get().bgFiturHome} bg={tema.get().bgFiturHome}
> >
<HiMiniUserGroup size={25} color={tema.get().utama} /> <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>
} /> } />
<Box p={20}> <Box p={20}>
<TextInput {/* <TextInput
styles={{ styles={{
input: { input: {
color: tema.get().utama, color: tema.get().utama,
@@ -60,8 +60,8 @@ export default function NavbarAdminDivision({ data, onSuccess }: { data: any, on
radius={30} radius={30}
leftSection={<HiMagnifyingGlass size={20} />} leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian" placeholder="Pencarian"
/> /> */}
<Box pt={20}> <Box mb={100}>
<Checkbox.Group value={value} onChange={setValue}> <Checkbox.Group value={value} onChange={setValue}>
{ {
(member.length === 0) ? ( (member.length === 0) ? (
@@ -91,7 +91,7 @@ export default function NavbarAdminDivision({ data, onSuccess }: { data: any, on
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Box mt={10}> <Box mt={10}>
<Divider size={"xs"} /> <Divider my={10} />
</Box> </Box>
</Box> </Box>
); );

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

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

99
src/module/project/ui/add_member_detail_project.tsx
View File

@@ -6,7 +6,7 @@ import toast from 'react-hot-toast';
import { funAddMemberProject, funGetAllMemberById, funGetOneProjectById } from '../lib/api_project'; import { funAddMemberProject, funGetAllMemberById, funGetOneProjectById } from '../lib/api_project';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks'; import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Skeleton, Stack, Text, TextInput } from '@mantine/core'; import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { LayoutNavbarNew, SkeletonSingle, TEMA, WARNA } from '@/module/_global'; import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA, WARNA } from '@/module/_global';
import { FaCheck } from 'react-icons/fa6'; import { FaCheck } from 'react-icons/fa6';
import LayoutModal from '@/module/_global/layout/layout_modal'; import LayoutModal from '@/module/_global/layout/layout_modal';
import { HiMagnifyingGlass } from 'react-icons/hi2'; import { HiMagnifyingGlass } from 'react-icons/hi2';
@@ -32,7 +32,7 @@ export default function AddMemberDetailProject() {
async function getData() { async function getData() {
try { try {
setLoading(true) setLoading(true)
const response = await funGetAllMemberById('?search=' + searchQuery, param.id ) const response = await funGetAllMemberById('?search=' + searchQuery, param.id)
if (response.success) { if (response.success) {
setData(response.data.member) setData(response.data.member)
} else { } else {
@@ -57,7 +57,7 @@ export default function AddMemberDetailProject() {
if (selectedFiles.some((i: any) => i.idUser == isData[index].idUser)) { if (selectedFiles.some((i: any) => i.idUser == isData[index].idUser)) {
setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != isData[index].idUser)) setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != isData[index].idUser))
} else { } else {
setSelectedFiles([...selectedFiles, { idUser: isData[index].idUser, name: isData[index].name, img: isData[index].img }]) setSelectedFiles([...selectedFiles, { idUser: isData[index].idUser, name: isData[index].name, img: isData[index].img }])
} }
}; };
@@ -221,55 +221,60 @@ export default function AddMemberDetailProject() {
.fill(null) .fill(null)
.map((_, i) => ( .map((_, i) => (
<Box key={i} mb={10}> <Box key={i} mb={10}>
<SkeletonSingle /> <SkeletonList />
</Box> </Box>
)) ))
: :
<Box mt={15} mb={100}> (isData.length === 0) ?
{isData.map((v, i) => { <Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser); <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
const found = isDataMember.some((i: any) => i.idUser == v.idUser) </Stack>
return ( :
<Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}> <Box mt={15} mb={100}>
<Grid align='center'> {isData.map((v, i) => {
<Grid.Col const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
span={{ const found = isDataMember.some((i: any) => i.idUser == v.idUser)
base: 1, return (
xs: 1, <Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}>
sm: 1, <Grid align='center'>
md: 1, <Grid.Col
lg: 1, span={{
xl: 1, base: 1,
}} xs: 1,
> sm: 1,
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" /> md: 1,
</Grid.Col> lg: 1,
<Grid.Col xl: 1,
span={{ }}
base: 11, >
xs: 11, <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
sm: 11, </Grid.Col>
md: 11, <Grid.Col
lg: 11, span={{
xl: 11, base: 11,
}} xs: 11,
> sm: 11,
<Flex justify='space-between' align={"center"}> md: 11,
<Flex direction={'column'} align="flex-start" justify="flex-start"> lg: 11,
<Text lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text> xl: 11,
<Text c={"dimmed"} pl={isMobile2 ? 40 : 30}>{(found) ? "sudah menjadi anggota" : ""}</Text> }}
>
<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 c={"dimmed"} pl={isMobile2 ? 40 : 30}>{(found) ? "sudah menjadi anggota" : ""}</Text>
</Flex>
{isSelected ? <FaCheck /> : null}
</Flex> </Flex>
{isSelected ? <FaCheck /> : null} </Grid.Col>
</Flex> </Grid>
</Grid.Col> <Box mt={10}>
</Grid> <Divider size={"xs"} />
<Box mt={10}> </Box>
<Divider size={"xs"} />
</Box> </Box>
</Box> );
); })}
})} </Box>
</Box>
} }
</Box> </Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{ <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{

8
src/module/project/ui/edit_task_project.tsx
View File

@@ -22,7 +22,7 @@ export default function EditTaskProject() {
function onVerification() { function onVerification() {
if (name == "") if (name == "")
return toast.error("Error! harus memasukkan judul tugas") return toast.error("Error! harus memasukkan judul Kegiatan")
setOpenModal(true) setOpenModal(true)
} }
@@ -79,7 +79,7 @@ export default function EditTaskProject() {
borderRadius: 10, borderRadius: 10,
}, },
}} }}
placeholder="Tugas" placeholder="Input Kegiatan"
label="Judul Kegiatan" label="Judul Kegiatan"
required required
size="md" size="md"
@@ -90,7 +90,7 @@ export default function EditTaskProject() {
}} }}
error={ error={
touched.name && ( touched.name && (
name == "" ? "Judul Tidak Boleh Kosong" : null name == "" ? "Judul Kegiatan Tidak Boleh Kosong" : null
) )
} }
onBlur={() => setTouched({ ...touched, name: true })} onBlur={() => setTouched({ ...touched, name: true })}
@@ -121,7 +121,7 @@ export default function EditTaskProject() {
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)} <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin mengedit tugas ini?" description="Apakah Anda yakin ingin mengedit Kegiatan ini?"
onYes={(val) => { onYes={(val) => {
if (val) { if (val) {
onSubmit() onSubmit()

25
src/module/project/ui/list_anggota_detail_project.tsx
View File

@@ -23,6 +23,27 @@ export default function ListAnggotaDetailProject() {
const router = useRouter() const router = useRouter()
const roleLogin = useHookstate(globalRole) const roleLogin = useHookstate(globalRole)
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
async function getOneDataCancel() {
try {
const res = await funGetOneProjectById(param.id, 'data');
console.log(res.data)
if (res.success) {
setReason(res.data.reason);
} else {
toast.error(res.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan data Kegiatan, coba lagi nanti");
}
}
useShallowEffect(() => {
getOneDataCancel();
}, [param.id])
async function getOneData() { async function getOneData() {
try { try {
@@ -98,7 +119,9 @@ const isMobile = useMediaQuery('(max-width: 369px)');
<Grid align='center' mt={10} <Grid align='center' mt={10}
onClick={() => { onClick={() => {
setDataChoose({ id: v.idUser, name: v.name }) setDataChoose({ id: v.idUser, name: v.name })
setOpenDrawer(true) reason == null ?
setOpenDrawer(true)
: setOpenDrawer(false)
}} }}
> >
<Grid.Col span={9}> <Grid.Col span={9}>

43
src/module/project/ui/list_file_detail_project.tsx
View File

@@ -25,6 +25,27 @@ export default function ListFileDetailProject() {
const [isExtension, setExtension] = useState('') const [isExtension, setExtension] = useState('')
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const isMobile = useMediaQuery("(max-width: 350px)"); const isMobile = useMediaQuery("(max-width: 350px)");
const [reason, setReason] = useState("")
async function getOneDataCancel() {
try {
const res = await funGetOneProjectById(param.id, 'data');
console.log(res.data)
if (res.success) {
setReason(res.data.reason);
} else {
toast.error(res.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan data Kegiatan, coba lagi nanti");
}
}
useShallowEffect(() => {
getOneDataCancel();
}, [param.id])
async function getOneData() { async function getOneData() {
try { try {
@@ -120,12 +141,12 @@ export default function ListFileDetailProject() {
lg: 1, lg: 1,
xl: 1, xl: 1,
}}> }}>
{item.extension == "pdf" && <BsFiletypePdf size={ 30} />} {item.extension == "pdf" && <BsFiletypePdf size={30} />}
{item.extension == "csv" && <BsFiletypeCsv size={ 30} />} {item.extension == "csv" && <BsFiletypeCsv size={30} />}
{item.extension == "png" && <BsFiletypePng size={ 30} />} {item.extension == "png" && <BsFiletypePng size={30} />}
{item.extension == "jpg" && <BsFiletypeJpg size={ 30} />} {item.extension == "jpg" && <BsFiletypeJpg size={30} />}
{item.extension == "jpeg" && <BsFiletypeJpg size={ 30} />} {item.extension == "jpeg" && <BsFiletypeJpg size={30} />}
{item.extension == "heic" && <BsFiletypeHeic size={ 30} />} {item.extension == "heic" && <BsFiletypeHeic size={30} />}
</Grid.Col> </Grid.Col>
<Grid.Col <Grid.Col
span={{ span={{
@@ -167,12 +188,16 @@ export default function ListFileDetailProject() {
</Box> </Box>
</Flex> </Flex>
<Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} > <Flex onClick={() => {
reason == null ?
setOpenModal(true)
: setOpenModal(false)
}} justify={'center'} align={'center'} direction={'column'} >
<Box> <Box>
<FaTrash size={30} color={tema.get().utama} /> <FaTrash size={30} color={reason == null ? tema.get().utama : "gray"} />
</Box> </Box>
<Box> <Box>
<Text c={tema.get().utama}>Hapus file</Text> <Text c={reason == null ? tema.get().utama : "gray"}>Hapus file</Text>
</Box> </Box>
</Flex> </Flex>
</SimpleGrid> </SimpleGrid>

27
src/module/project/ui/list_tugas_detail_project.tsx
View File

@@ -25,6 +25,27 @@ export default function ListTugasDetailProject() {
const [isOpenModal, setOpenModal] = useState(false) const [isOpenModal, setOpenModal] = useState(false)
const router = useRouter() const router = useRouter()
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
async function getOneDataCancel() {
try {
const res = await funGetOneProjectById(param.id, 'data');
console.log(res.data)
if (res.success) {
setReason(res.data.reason);
} else {
toast.error(res.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan data Kegiatan, coba lagi nanti");
}
}
useShallowEffect(() => {
getOneDataCancel();
}, [param.id])
async function getOneData() { async function getOneData() {
try { try {
@@ -111,10 +132,12 @@ export default function ListTugasDetailProject() {
isData.map((item, index) => { isData.map((item, index) => {
return ( return (
<Box key={index}> <Box key={index}>
<Box onClick={() => { <Box onClick={() => {
setIdData(item.id) setIdData(item.id)
setStatusData(item.status) setStatusData(item.status)
setOpenDrawer(true) reason == null ?
setOpenDrawer(true)
: setOpenDrawer(false)
}} my={18}> }} my={18}>
<Checkbox color="teal" size="md" checked={(item.status === 1) ? true : false} disabled <Checkbox color="teal" size="md" checked={(item.status === 1) ? true : false} disabled
label={item.status === 1 ? 'Sudah Selesai' : 'Belum Selesai'} label={item.status === 1 ? 'Sudah Selesai' : 'Belum Selesai'}

46
src/module/project/ui/navbar_detail_project.tsx
View File

@@ -19,12 +19,14 @@ export default function NavbarDetailProject() {
const [isOpen, setOpen] = useState(false) const [isOpen, setOpen] = useState(false)
const roleLogin = useHookstate(globalRole) const roleLogin = useHookstate(globalRole)
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
async function getOneData() { async function getOneData() {
try { try {
const res = await funGetOneProjectById(param.id, 'data'); const res = await funGetOneProjectById(param.id, 'data');
if (res.success) { if (res.success) {
setName(res.data.title); setName(res.data.title);
setReason(res.data.reason);
} else { } else {
toast.error(res.message); toast.error(res.message);
} }
@@ -69,15 +71,17 @@ export default function NavbarDetailProject() {
cursor: 'pointer' cursor: 'pointer'
}} }}
onClick={() => { onClick={() => {
router.push(param.id + '/add-task') reason == null ?
router.push(param.id + '/add-task')
: null
}} }}
pb={20} pb={20}
> >
<Box> <Box>
<IoAddCircle size={30} color={tema.get().utama} /> <IoAddCircle size={30} color={reason == null ? tema.get().utama : "gray"} />
</Box> </Box>
<Box> <Box>
<Text c={tema.get().utama} ta='center'>Tambah Tugas</Text> <Text c={reason == null ? tema.get().utama : "gray"} ta='center'>Tambah Tugas</Text>
</Box> </Box>
</Flex> </Flex>
@@ -86,14 +90,16 @@ export default function NavbarDetailProject() {
cursor: 'pointer' cursor: 'pointer'
}} }}
onClick={() => { onClick={() => {
router.push(param.id + '/add-file') reason == null ?
router.push(param.id + '/add-file')
: null
}} }}
> >
<Box> <Box>
<FaFileCirclePlus size={30} color={tema.get().utama} /> <FaFileCirclePlus size={30} color={reason == null ? tema.get().utama : "gray"} />
</Box> </Box>
<Box> <Box>
<Text c={tema.get().utama} ta='center'>Tambah file</Text> <Text c={reason == null ? tema.get().utama : "gray"} ta='center'>Tambah file</Text>
</Box> </Box>
</Flex> </Flex>
@@ -105,14 +111,16 @@ export default function NavbarDetailProject() {
cursor: 'pointer' cursor: 'pointer'
}} }}
onClick={() => { onClick={() => {
router.push(param.id + '/add-member') reason == null ?
router.push(param.id + '/add-member')
: null
}} }}
> >
<Box> <Box>
<FaUsers size={30} color={tema.get().utama} /> <FaUsers size={30} color={reason == null ? tema.get().utama : "gray"} />
</Box> </Box>
<Box> <Box>
<Text c={tema.get().utama} ta='center'>Tambah anggota</Text> <Text c={reason == null ? tema.get().utama : "gray"} ta='center'>Tambah anggota</Text>
</Box> </Box>
</Flex> </Flex>
@@ -120,13 +128,17 @@ export default function NavbarDetailProject() {
style={{ style={{
cursor: 'pointer' cursor: 'pointer'
}} }}
onClick={() => { router.push(param.id + '/edit') }} onClick={() => {
reason == null ?
router.push(param.id + '/edit')
: null
}}
> >
<Box> <Box>
<FaPencil size={30} color={tema.get().utama} /> <FaPencil size={30} color={reason == null ? tema.get().utama : "gray"} />
</Box> </Box>
<Box> <Box>
<Text c={tema.get().utama} ta='center'>Edit</Text> <Text c={reason == null ? tema.get().utama : "gray"} ta='center'>Edit</Text>
</Box> </Box>
</Flex> </Flex>
@@ -134,13 +146,17 @@ export default function NavbarDetailProject() {
style={{ style={{
cursor: 'pointer' cursor: 'pointer'
}} }}
onClick={() => { router.push(param.id + '/cancel') }} onClick={() => {
reason == null ?
router.push(param.id + '/cancel')
: null
}}
> >
<Box> <Box>
<MdCancel size={30} color={tema.get().utama} /> <MdCancel size={30} color={reason == null ? tema.get().utama : "gray"} />
</Box> </Box>
<Box> <Box>
<Text c={tema.get().utama} ta='center'>Batal</Text> <Text c={reason == null ? tema.get().utama : "gray"} ta='center'>Batal</Text>
</Box> </Box>
</Flex> </Flex>
</> </>

114
src/module/project/ui/progress_detail_project.tsx
View File

@@ -1,6 +1,6 @@
'use client' 'use client'
import { useHookstate } from '@hookstate/core'; import { useHookstate } from '@hookstate/core';
import { ActionIcon, Box, Grid, Progress, Skeleton, Text } from '@mantine/core'; import { ActionIcon, Box, Grid, Group, Progress, Skeleton, Text } from '@mantine/core';
import { useParams } from 'next/navigation'; import { useParams } from 'next/navigation';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { HiMiniPresentationChartBar } from 'react-icons/hi2'; import { HiMiniPresentationChartBar } from 'react-icons/hi2';
@@ -9,6 +9,7 @@ import toast from 'react-hot-toast';
import { funGetOneProjectById } from '../lib/api_project'; import { funGetOneProjectById } from '../lib/api_project';
import { useShallowEffect } from '@mantine/hooks'; import { useShallowEffect } from '@mantine/hooks';
import { TEMA } from '@/module/_global'; import { TEMA } from '@/module/_global';
import { IoIosWarning } from 'react-icons/io';
export default function ProgressDetailProject() { export default function ProgressDetailProject() {
const [valProgress, setValProgress] = useState(0) const [valProgress, setValProgress] = useState(0)
@@ -17,7 +18,8 @@ export default function ProgressDetailProject() {
const refresh = useHookstate(globalRefreshProject) const refresh = useHookstate(globalRefreshProject)
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
async function getOneData() { async function getOneData() {
try { try {
setLoading(true) setLoading(true)
@@ -37,6 +39,26 @@ export default function ProgressDetailProject() {
} }
} }
async function getOneDataCancel() {
try {
const res = await funGetOneProjectById(param.id, 'data');
console.log(res.data)
if (res.success) {
setReason(res.data.reason);
} else {
toast.error(res.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan data Kegiatan, coba lagi nanti");
}
}
useShallowEffect(() => {
getOneDataCancel();
}, [param.id])
function onRefresh() { function onRefresh() {
if (refresh.get()) { if (refresh.get()) {
getOneData() getOneData()
@@ -55,46 +77,62 @@ export default function ProgressDetailProject() {
return ( return (
<> <>
<Box mt={10}> <Box mt={10}>
{loading ? {reason !== null ?
(
<Box mb={10}>
<Box p={15} bg={"#FFF2CD"} style={{
borderRadius: 10,
}}>
<Group align='center'>
<IoIosWarning size={25}/>
<Text fw={"bold"}>Kegiatan dibatalkan</Text>
</Group>
<Text mt={5} truncate="end">{reason}</Text>
</Box>
</Box>
)
: null
}
{loading ?
<Skeleton width={"100%"} height={100} radius={"md"} /> <Skeleton width={"100%"} height={100} radius={"md"} />
: :
<Box <Box
p={20} p={20}
bg={"#DCEED8"} bg={"#DCEED8"}
style={{ style={{
borderRadius: 10, borderRadius: 10,
}} }}
> >
<Grid gutter={"lg"}> <Grid gutter={"lg"}>
<Grid.Col span={3}> <Grid.Col span={3}>
<ActionIcon <ActionIcon
variant="gradient" variant="gradient"
size={68} size={68}
aria-label="Gradient action icon" aria-label="Gradient action icon"
radius={100} radius={100}
// gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }} // gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }}
bg={tema.get().bgFiturHome} bg={tema.get().bgFiturHome}
> >
<HiMiniPresentationChartBar size={35} color={tema.get().utama} /> <HiMiniPresentationChartBar size={35} color={tema.get().utama} />
</ActionIcon> </ActionIcon>
</Grid.Col> </Grid.Col>
<Grid.Col span={9}> <Grid.Col span={9}>
<Box> <Box>
<Text>Kemajuan Kegiatan {valProgress}%</Text> <Text>Kemajuan Kegiatan {valProgress}%</Text>
<Progress <Progress
style={{ style={{
border: `1px solid ${"#BDBDBD"}`, border: `1px solid ${"#BDBDBD"}`,
}} }}
w={"100%"} w={"100%"}
color={tema.get().bgFiturHome} color={tema.get().bgFiturHome}
radius="md" radius="md"
size="xl" size="xl"
value={valProgress} value={valProgress}
/> />
</Box> </Box>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
</Box> </Box>
} }
</Box> </Box>
</> </>