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

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>
</>