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>

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 { 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 { LayoutNavbarNew, SkeletonSingle, TEMA, WARNA } from '@/module/_global';
import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA, WARNA } from '@/module/_global';
import { FaCheck } from 'react-icons/fa6';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { HiMagnifyingGlass } from 'react-icons/hi2';
@@ -32,7 +32,7 @@ export default function AddMemberDetailProject() {
async function getData() {
try {
setLoading(true)
const response = await funGetAllMemberById('?search=' + searchQuery, param.id )
const response = await funGetAllMemberById('?search=' + searchQuery, param.id)
if (response.success) {
setData(response.data.member)
} else {
@@ -57,7 +57,7 @@ export default function AddMemberDetailProject() {
if (selectedFiles.some((i: any) => i.idUser == isData[index].idUser)) {
setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != isData[index].idUser))
} 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)
.map((_, i) => (
<Box key={i} mb={10}>
<SkeletonSingle />
<SkeletonList />
</Box>
))
:
<Box mt={15} mb={100}>
{isData.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
const found = isDataMember.some((i: any) => i.idUser == v.idUser)
return (
<Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}>
<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>
<Text c={"dimmed"} pl={isMobile2 ? 40 : 30}>{(found) ? "sudah menjadi anggota" : ""}</Text>
(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={15} mb={100}>
{isData.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
const found = isDataMember.some((i: any) => i.idUser == v.idUser)
return (
<Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}>
<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>
<Text c={"dimmed"} pl={isMobile2 ? 40 : 30}>{(found) ? "sudah menjadi anggota" : ""}</Text>
</Flex>
{isSelected ? <FaCheck /> : null}
</Flex>
{isSelected ? <FaCheck /> : null}
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box>
</Box>
);
})}
</Box>
);
})}
</Box>
}
</Box>
<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() {
if (name == "")
return toast.error("Error! harus memasukkan judul tugas")
return toast.error("Error! harus memasukkan judul Kegiatan")
setOpenModal(true)
}
@@ -79,7 +79,7 @@ export default function EditTaskProject() {
borderRadius: 10,
},
}}
placeholder="Tugas"
placeholder="Input Kegiatan"
label="Judul Kegiatan"
required
size="md"
@@ -90,7 +90,7 @@ export default function EditTaskProject() {
}}
error={
touched.name && (
name == "" ? "Judul Tidak Boleh Kosong" : null
name == "" ? "Judul Kegiatan Tidak Boleh Kosong" : null
)
}
onBlur={() => setTouched({ ...touched, name: true })}
@@ -121,7 +121,7 @@ export default function EditTaskProject() {
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin mengedit tugas ini?"
description="Apakah Anda yakin ingin mengedit Kegiatan ini?"
onYes={(val) => {
if (val) {
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 roleLogin = useHookstate(globalRole)
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() {
try {
@@ -98,7 +119,9 @@ const isMobile = useMediaQuery('(max-width: 369px)');
<Grid align='center' mt={10}
onClick={() => {
setDataChoose({ id: v.idUser, name: v.name })
setOpenDrawer(true)
reason == null ?
setOpenDrawer(true)
: setOpenDrawer(false)
}}
>
<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 tema = useHookstate(TEMA)
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() {
try {
@@ -120,12 +141,12 @@ export default function ListFileDetailProject() {
lg: 1,
xl: 1,
}}>
{item.extension == "pdf" && <BsFiletypePdf size={ 30} />}
{item.extension == "csv" && <BsFiletypeCsv size={ 30} />}
{item.extension == "png" && <BsFiletypePng size={ 30} />}
{item.extension == "jpg" && <BsFiletypeJpg size={ 30} />}
{item.extension == "jpeg" && <BsFiletypeJpg size={ 30} />}
{item.extension == "heic" && <BsFiletypeHeic size={ 30} />}
{item.extension == "pdf" && <BsFiletypePdf size={30} />}
{item.extension == "csv" && <BsFiletypeCsv size={30} />}
{item.extension == "png" && <BsFiletypePng size={30} />}
{item.extension == "jpg" && <BsFiletypeJpg size={30} />}
{item.extension == "jpeg" && <BsFiletypeJpg size={30} />}
{item.extension == "heic" && <BsFiletypeHeic size={30} />}
</Grid.Col>
<Grid.Col
span={{
@@ -167,12 +188,16 @@ export default function ListFileDetailProject() {
</Box>
</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>
<FaTrash size={30} color={tema.get().utama} />
<FaTrash size={30} color={reason == null ? tema.get().utama : "gray"} />
</Box>
<Box>
<Text c={tema.get().utama}>Hapus file</Text>
<Text c={reason == null ? tema.get().utama : "gray"}>Hapus file</Text>
</Box>
</Flex>
</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 router = useRouter()
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() {
try {
@@ -111,10 +132,12 @@ export default function ListTugasDetailProject() {
isData.map((item, index) => {
return (
<Box key={index}>
<Box onClick={() => {
<Box onClick={() => {
setIdData(item.id)
setStatusData(item.status)
setOpenDrawer(true)
reason == null ?
setOpenDrawer(true)
: setOpenDrawer(false)
}} my={18}>
<Checkbox color="teal" size="md" checked={(item.status === 1) ? true : false} disabled
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 roleLogin = useHookstate(globalRole)
const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
async function getOneData() {
try {
const res = await funGetOneProjectById(param.id, 'data');
if (res.success) {
setName(res.data.title);
setReason(res.data.reason);
} else {
toast.error(res.message);
}
@@ -69,15 +71,17 @@ export default function NavbarDetailProject() {
cursor: 'pointer'
}}
onClick={() => {
router.push(param.id + '/add-task')
reason == null ?
router.push(param.id + '/add-task')
: null
}}
pb={20}
>
<Box>
<IoAddCircle size={30} color={tema.get().utama} />
<IoAddCircle size={30} color={reason == null ? tema.get().utama : "gray"} />
</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>
</Flex>
@@ -86,14 +90,16 @@ export default function NavbarDetailProject() {
cursor: 'pointer'
}}
onClick={() => {
router.push(param.id + '/add-file')
reason == null ?
router.push(param.id + '/add-file')
: null
}}
>
<Box>
<FaFileCirclePlus size={30} color={tema.get().utama} />
<FaFileCirclePlus size={30} color={reason == null ? tema.get().utama : "gray"} />
</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>
</Flex>
@@ -105,14 +111,16 @@ export default function NavbarDetailProject() {
cursor: 'pointer'
}}
onClick={() => {
router.push(param.id + '/add-member')
reason == null ?
router.push(param.id + '/add-member')
: null
}}
>
<Box>
<FaUsers size={30} color={tema.get().utama} />
<FaUsers size={30} color={reason == null ? tema.get().utama : "gray"} />
</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>
</Flex>
@@ -120,13 +128,17 @@ export default function NavbarDetailProject() {
style={{
cursor: 'pointer'
}}
onClick={() => { router.push(param.id + '/edit') }}
onClick={() => {
reason == null ?
router.push(param.id + '/edit')
: null
}}
>
<Box>
<FaPencil size={30} color={tema.get().utama} />
<FaPencil size={30} color={reason == null ? tema.get().utama : "gray"} />
</Box>
<Box>
<Text c={tema.get().utama} ta='center'>Edit</Text>
<Text c={reason == null ? tema.get().utama : "gray"} ta='center'>Edit</Text>
</Box>
</Flex>
@@ -134,13 +146,17 @@ export default function NavbarDetailProject() {
style={{
cursor: 'pointer'
}}
onClick={() => { router.push(param.id + '/cancel') }}
onClick={() => {
reason == null ?
router.push(param.id + '/cancel')
: null
}}
>
<Box>
<MdCancel size={30} color={tema.get().utama} />
<MdCancel size={30} color={reason == null ? tema.get().utama : "gray"} />
</Box>
<Box>
<Text c={tema.get().utama} ta='center'>Batal</Text>
<Text c={reason == null ? tema.get().utama : "gray"} ta='center'>Batal</Text>
</Box>
</Flex>
</>

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

@@ -1,6 +1,6 @@
'use client'
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 React, { useState } from 'react';
import { HiMiniPresentationChartBar } from 'react-icons/hi2';
@@ -9,6 +9,7 @@ import toast from 'react-hot-toast';
import { funGetOneProjectById } from '../lib/api_project';
import { useShallowEffect } from '@mantine/hooks';
import { TEMA } from '@/module/_global';
import { IoIosWarning } from 'react-icons/io';
export default function ProgressDetailProject() {
const [valProgress, setValProgress] = useState(0)
@@ -17,7 +18,8 @@ export default function ProgressDetailProject() {
const refresh = useHookstate(globalRefreshProject)
const [loading, setLoading] = useState(true)
const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
async function getOneData() {
try {
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() {
if (refresh.get()) {
getOneData()
@@ -55,46 +77,62 @@ export default function ProgressDetailProject() {
return (
<>
<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"} />
:
<Box
p={20}
bg={"#DCEED8"}
style={{
borderRadius: 10,
}}
>
<Grid gutter={"lg"}>
<Grid.Col span={3}>
<ActionIcon
variant="gradient"
size={68}
aria-label="Gradient action icon"
radius={100}
<Box
p={20}
bg={"#DCEED8"}
style={{
borderRadius: 10,
}}
>
<Grid gutter={"lg"}>
<Grid.Col span={3}>
<ActionIcon
variant="gradient"
size={68}
aria-label="Gradient action icon"
radius={100}
// gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }}
bg={tema.get().bgFiturHome}
>
<HiMiniPresentationChartBar size={35} color={tema.get().utama} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={9}>
<Box>
<Text>Kemajuan Kegiatan {valProgress}%</Text>
<Progress
style={{
border: `1px solid ${"#BDBDBD"}`,
}}
w={"100%"}
color={tema.get().bgFiturHome}
radius="md"
size="xl"
value={valProgress}
/>
</Box>
</Grid.Col>
</Grid>
</Box>
>
<HiMiniPresentationChartBar size={35} color={tema.get().utama} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={9}>
<Box>
<Text>Kemajuan Kegiatan {valProgress}%</Text>
<Progress
style={{
border: `1px solid ${"#BDBDBD"}`,
}}
w={"100%"}
color={tema.get().bgFiturHome}
radius="md"
size="xl"
value={valProgress}
/>
</Box>
</Grid.Col>
</Grid>
</Box>
}
</Box>
</>