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 10:01:09 +08:00
parent 0db13c9e5e
commit 63b590c449
7 changed files with 98 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/api/project/[id]/route.ts
View File

@@ -73,8 +73,8 @@ export async function GET(request: Request, context: { params: { id: string } })
const formatData = dataProgress.map((v: any) => ({ const formatData = dataProgress.map((v: any) => ({
..._.omit(v, ["dateStart", "dateEnd"]), ..._.omit(v, ["dateStart", "dateEnd"]),
dateStart: moment(v.dateStart).format("DD MMMM YYYY"), dateStart: moment(v.dateStart).format("DD-MM-YYYY"),
dateEnd: moment(v.dateEnd).format("DD MMMM YYYY"), dateEnd: moment(v.dateEnd).format("DD-MM-YYYY"),
})) }))
allData = formatData allData = formatData

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

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
import { IDataMemberProject, IDataMemberProjectDetail } from '../lib/type_project'; import { IDataMemberProject, IDataMemberProjectDetail } from '../lib/type_project';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import { funAddMemberProject, funGetAllMemberById, funGetOneProjectById } from '../lib/api_project'; import { funAddMemberProject, funGetAllMemberById, funGetOneProjectById } from '../lib/api_project';
import { 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, SkeletonSingle, TEMA, WARNA } from '@/module/_global';
import { FaCheck } from 'react-icons/fa6'; import { FaCheck } from 'react-icons/fa6';
@@ -26,6 +26,7 @@ export default function AddMemberDetailProject() {
const [onClickSearch, setOnClickSearch] = useState(false) const [onClickSearch, setOnClickSearch] = useState(false)
const [searchQuery, setSearchQuery] = useState('') const [searchQuery, setSearchQuery] = useState('')
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 438px)");
async function getData() { async function getData() {
@@ -231,20 +232,32 @@ export default function AddMemberDetailProject() {
return ( return (
<Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}> <Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}>
<Grid align='center'> <Grid align='center'>
<Grid.Col span={{ <Grid.Col
base: 3, span={{
xl: 2 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={{ <Grid.Col
base: 9, span={{
xl: 10 base: 11,
}}> xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}
>
<Flex justify='space-between' align={"center"}> <Flex justify='space-between' align={"center"}>
<Flex direction={'column'} align="flex-start" justify="flex-start"> <Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1}>{v.name}</Text> <Text lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
<Text c={"dimmed"}>{(found) ? "sudah menjadi anggota" : ""}</Text> <Text c={"dimmed"} pl={isMobile2 ? 40 : 30}>{(found) ? "sudah menjadi anggota" : ""}</Text>
</Flex> </Flex>
{isSelected ? <FaCheck /> : null} {isSelected ? <FaCheck /> : null}
</Flex> </Flex>

5
src/module/project/ui/create_users_project.tsx
View File

@@ -180,6 +180,11 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
</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) => { dataMember.map((v, index) => {
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id); const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
return ( return (

6
src/module/project/ui/edit_detail_task_project.tsx
View File

@@ -76,7 +76,7 @@ export default function EditDetailTaskProject() {
return ( return (
<Box> <Box>
<LayoutNavbarNew back="" title={"Edit Detail Kegiatan"} menu /> <LayoutNavbarNew back="" title={"Edit Tanggal dan tugas"} menu />
<Box p={20}> <Box p={20}>
<Group <Group
justify="center" justify="center"
@@ -140,7 +140,7 @@ export default function EditDetailTaskProject() {
borderRadius: 10, borderRadius: 10,
}, },
}} }}
placeholder="Input Nama Tahapan" placeholder="Input Judul Tahapan"
label="Judul Tahapan" label="Judul Tahapan"
required required
size="md" size="md"
@@ -149,7 +149,7 @@ export default function EditDetailTaskProject() {
onBlur={() => setTouched({ ...touched, title: true })} onBlur={() => setTouched({ ...touched, title: true })}
error={ error={
touched.title && ( touched.title && (
name == "" ? "Judul Tidak Boleh Kosong" : null name == "" ? "Judul Tahapan Tidak Boleh Kosong" : null
) )
} }
/> />

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

@@ -5,7 +5,7 @@ import React, { useState } from 'react';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import { funDeleteFileProject, funGetOneProjectById } from '../lib/api_project'; import { funDeleteFileProject, funGetOneProjectById } from '../lib/api_project';
import { useParams } from 'next/navigation'; import { useParams } from 'next/navigation';
import { useShallowEffect } from '@mantine/hooks'; import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { IDataFileProject } from '../lib/type_project'; import { IDataFileProject } from '../lib/type_project';
import { BsFileTextFill, BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs'; import { BsFileTextFill, BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
import LayoutModal from '@/module/_global/layout/layout_modal'; import LayoutModal from '@/module/_global/layout/layout_modal';
@@ -24,6 +24,7 @@ export default function ListFileDetailProject() {
const [isOpenModalView, setOpenModalView] = useState(false) const [isOpenModalView, setOpenModalView] = useState(false)
const [isExtension, setExtension] = useState('') const [isExtension, setExtension] = useState('')
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const isMobile = useMediaQuery("(max-width: 350px)");
async function getOneData() { async function getOneData() {
try { try {
@@ -110,20 +111,35 @@ export default function ListFileDetailProject() {
setOpenDrawer(true) setOpenDrawer(true)
}} }}
> >
<Grid gutter={"sm"} justify='flex-start' align='flex-start'> <Grid justify='center' align='center'>
<Grid.Col span={"auto"}> <Grid.Col span={{
<Center > base: 1.5,
xs: 1,
sm: 1,
md: 1,
lg: 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" || item.extension == "jpeg" && <BsFiletypeJpg size={30} />} {item.extension == "jpg" && <BsFiletypeJpg size={ 30} />}
{item.extension == "jpeg" && <BsFiletypeJpg size={ 30} />}
{item.extension == "heic" && <BsFiletypeHeic size={ 30} />} {item.extension == "heic" && <BsFiletypeHeic size={ 30} />}
</Center>
</Grid.Col> </Grid.Col>
<Grid.Col span={10}> <Grid.Col
span={{
base: 10.5,
xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}
>
<Text style={{ <Text style={{
overflowWrap: "break-word" overflowWrap: "break-word"
}}>{item.name + '.' + item.extension}</Text> }} pl={isMobile ? 10 : 0} truncate="end">{item.name + '.' + item.extension}</Text>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Group> <Group>
@@ -136,7 +152,7 @@ export default function ListFileDetailProject() {
<LayoutDrawer opened={openDrawer} title={<Text lineClamp={1}>{nameData}</Text>} onClose={() => setOpenDrawer(false)}> <LayoutDrawer opened={openDrawer} title={<Text truncate="end">{nameData}</Text>} onClose={() => setOpenDrawer(false)}>
<Box> <Box>
<Stack pt={10}> <Stack pt={10}>
<SimpleGrid <SimpleGrid

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

@@ -191,15 +191,7 @@ export default function ListProject() {
{v.title} {v.title}
</Text> </Text>
</Box> </Box>
</Box> </Box>
<RiCircleFill size={12} color={
v.status === 0 ? '#1372C4' :
v.status === 1 ? '#C5771A' :
v.status === 2 ? '#0B6025' :
v.status === 3 ? '#BB1F1F' :
""
} />
</Group> </Group>
</Grid.Col> </Grid.Col>
</Grid> </Grid>

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

@@ -96,22 +96,26 @@ export default function ListTugasDetailProject() {
style={{ style={{
borderRadius: 10, borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`, border: `1px solid ${"#D6D8F6"}`,
padding: 20, // padding: 10,
}} }}
pl={20}
pr={20}
> >
{ {
loading ? <> loading ? <>
<Box pl={5} pr={5} pt={20} pb={20}>
<SkeletonDetailListTugasTask /> <SkeletonDetailListTugasTask />
</Box>
</> : </> :
isData.length === 0 ? <Text>Tidak ada tugas</Text> : isData.length === 0 ? <Text>Tidak ada tugas</Text> :
isData.map((item, index) => { isData.map((item, index) => {
return ( return (
<Box key={index} mb={20}> <Box key={index}>
<Box onClick={() => { <Box onClick={() => {
setIdData(item.id) setIdData(item.id)
setStatusData(item.status) setStatusData(item.status)
setOpenDrawer(true) setOpenDrawer(true)
}}> }} 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'}
/> />
@@ -134,7 +138,7 @@ export default function ListTugasDetailProject() {
</Grid> </Grid>
</Box> </Box>
<Box> <Box>
<SimpleGrid cols={{ base: 1, sm: 2, lg: 2 }} mt={20}> <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} my={20}>
<Box> <Box>
<Text>Tanggal Mulai</Text> <Text>Tanggal Mulai</Text>
<Group <Group
@@ -161,7 +165,7 @@ export default function ListTugasDetailProject() {
</Box> </Box>
</Box> </Box>
</Box> </Box>
<Divider my={"lg"} /> <Divider my={20}/>
</Box> </Box>
) )
}) })
@@ -209,7 +213,7 @@ export default function ListTugasDetailProject() {
</LayoutDrawer> </LayoutDrawer>
<LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)} <LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin menghapus Kegiatan ini?" description="Apakah Anda yakin ingin menghapus Tahapan Tugas ini?"
onYes={(val) => { onYes={(val) => {
if (val) { if (val) {
onDelete() onDelete()
@@ -219,11 +223,10 @@ export default function ListTugasDetailProject() {
<LayoutDrawer opened={openDrawerStatus} title={'Status'} onClose={() => setOpenDrawerStatus(false)}> <LayoutDrawer opened={openDrawerStatus} title={'Status'} onClose={() => setOpenDrawerStatus(false)}>
<Box> <Box>
<Stack pt={10}>
{ {
valStatusDetailProject.map((item, index) => { valStatusDetailProject.map((item, index) => {
return ( return (
<Box mb={5} key={index} onClick={() => { onUpdateStatus(item.value) }}> <Box key={index} onClick={() => { onUpdateStatus(item.value) }}>
<Flex justify={"space-between"} align={"center"}> <Flex justify={"space-between"} align={"center"}>
<Group> <Group>
<Text style={{ <Text style={{
@@ -245,13 +248,11 @@ export default function ListTugasDetailProject() {
{statusData === item.value ? <FaCheck style={{ marginRight: 10 }} /> : ""} {statusData === item.value ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text> </Text>
</Flex> </Flex>
<Divider my={"md"} /> <Divider my={20} />
</Box> </Box>
) )
}) })
} }
</Stack>
</Box> </Box>
</LayoutDrawer> </LayoutDrawer>