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

Merge pull request #184 from bipproduction/lukman/3-september-2024

Browse Source 
style : update responsive
This commit is contained in:
Amalia
2024-09-03 16:36:06 +08:00
committed by GitHub
parent e816f5d106 70d486d469
commit 596b3cf151
7 changed files with 205 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/api/task/[id]/route.ts
View File

@@ -2,8 +2,10 @@ import { prisma } from "@/module/_global";
import { funGetUserByCookies } from "@/module/auth"; import { funGetUserByCookies } from "@/module/auth";
import _ from "lodash"; import _ from "lodash";
import moment from "moment"; import moment from "moment";
import "moment/locale/id"
import { NextResponse } from "next/server"; import { NextResponse } from "next/server";
// GET DETAIL TASK DIVISI / GET ONE // GET DETAIL TASK DIVISI / GET ONE
export async function GET(request: Request, context: { params: { id: string } }) { export async function GET(request: Request, context: { params: { id: string } }) {
try { try {

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

@@ -82,7 +82,7 @@ export default function CreateAnggotaDivision() {
return ( return (
<Box> <Box>
<LayoutNavbarNew back="" title="tambah anggota" <LayoutNavbarNew back={`/division/info/${param.id}`} title="tambah anggota"
menu menu
/> />
<Box p={20}> <Box p={20}>

48
src/module/task/ui/add_member_detail_task.tsx
View File

@@ -9,6 +9,7 @@ import {
Checkbox, Checkbox,
Divider, Divider,
Flex, Flex,
Grid,
Group, Group,
rem, rem,
Stack, Stack,
@@ -148,32 +149,29 @@ export default function AddMemberDetailTask() {
const found = isDataMember.some((i: any) => i.idUser == v.idUser) const found = isDataMember.some((i: any) => i.idUser == v.idUser)
return ( return (
<Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}> <Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}>
<Flex justify={"space-between"} align={"center"}> <Grid align='center'>
<Group> <Grid.Col span={{
base: 3,
xl: 2
}}>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" /> <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Stack align="flex-start" justify="flex-start"> </Grid.Col>
<Text style={{ <Grid.Col span={{
cursor: 'pointer', base: 9,
display: 'flex', xl: 10
alignItems: 'center', }}>
}}> <Flex justify='space-between' align={"center"}>
{v.name} <Flex direction={'column'} align="flex-start" justify="flex-start">
</Text> <Text lineClamp={1}>{v.name}</Text>
<Text c={"dimmed"}>{(found) ? "sudah menjadi anggota" : ""}</Text> <Text c={"dimmed"}>{(found) ? "sudah menjadi anggota" : ""}</Text>
</Stack> </Flex>
</Group> {isSelected ? <FaCheck /> : null}
<Text </Flex>
style={{ </Grid.Col>
cursor: 'pointer', </Grid>
display: 'flex', <Box mt={10}>
alignItems: 'center', <Divider size={"xs"} />
paddingLeft: 20, </Box>
}}
>
{isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Flex>
<Divider my={"md"} />
</Box> </Box>
); );
})} })}

80
src/module/task/ui/create_users_project.tsx
View File

@@ -9,6 +9,7 @@ import {
Button, Button,
Divider, Divider,
Flex, Flex,
Grid,
Group, Group,
rem, rem,
Skeleton, Skeleton,
@@ -111,7 +112,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
<Text c={WARNA.biruTua} fw={"bold"}> <Text c={WARNA.biruTua} fw={"bold"}>
Pilih Semua Anggota Pilih Semua Anggota
</Text> </Text>
<BsListCheck size={25} style={{ marginRight: 5 }} color={WARNA.biruTua}/> <BsListCheck size={25} style={{ marginRight: 5 }} color={WARNA.biruTua} />
</Group> </Group>
} }
<Box mt={15} mb={100}> <Box mt={15} mb={100}>
@@ -120,7 +121,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
.fill(null) .fill(null)
.map((_, i) => ( .map((_, i) => (
<Box key={i} mb={15}> <Box key={i} mb={15}>
<SkeletonSingle/> <SkeletonSingle />
</Box> </Box>
)) ))
: :
@@ -128,51 +129,50 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser); const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
return ( return (
<Box mb={15} key={i} onClick={() => handleFileClick(i)}> <Box mb={15} key={i} onClick={() => handleFileClick(i)}>
<Flex justify={"space-between"} align={"center"}> <Grid align='center'>
<Group> <Grid.Col span={{
base: 3,
xl: 2
}}>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" /> <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Text style={{ </Grid.Col>
cursor: 'pointer', <Grid.Col span={{
display: 'flex', base: 9,
alignItems: 'center', xl: 10
}}> }}>
{v.name} <Flex justify='space-between' align={"center"}>
</Text> <Flex direction={'column'} align="flex-start" justify="flex-start">
</Group> <Text lineClamp={1}>{v.name}</Text>
<Text </Flex>
style={{ {isSelected ? <FaCheck /> : null}
cursor: 'pointer', </Flex>
display: 'flex', </Grid.Col>
alignItems: 'center', </Grid>
paddingLeft: 20, <Box mt={10}>
}} <Divider size={"xs"} />
> </Box>
{isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Flex>
<Divider my={"md"} />
</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={{
maxWidth: rem(550), maxWidth: rem(550),
zIndex: 999, zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`, backgroundColor: `${WARNA.bgWhite}`,
}}> }}>
<Button <Button
c={"white"} c={"white"}
bg={WARNA.biruTua} bg={WARNA.biruTua}
size="lg" size="lg"
radius={30} radius={30}
fullWidth fullWidth
onClick={() => { onSubmit() }} onClick={() => { onSubmit() }}
> >
Simpan Simpan
</Button> </Button>
</Box> </Box>
</Box> </Box>
); );
} }

57
src/module/task/ui/detail_list_anggota_task.tsx
View File

@@ -1,6 +1,6 @@
'use client' 'use client'
import { LayoutDrawer, SkeletonSingle, WARNA } from "@/module/_global"; import { LayoutDrawer, SkeletonSingle, WARNA } from "@/module/_global";
import { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack } from "@mantine/core"; import { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack, Grid } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
@@ -91,31 +91,34 @@ export default function ListAnggotaDetailTask() {
isData.length === 0 ? <Text>Tidak ada anggota</Text> : isData.length === 0 ? <Text>Tidak ada anggota</Text> :
isData.map((v, i) => { isData.map((v, i) => {
return ( return (
<Flex <Box key={i}>
justify={"space-between"} <Grid align='center' mt={10}
align={"center"} onClick={() => {
mt={20} setDataChoose({ id: v.idUser, name: v.name })
key={i} setOpenDrawer(true)
onClick={() => { }}
setDataChoose({ id: v.idUser, name: v.name }) >
setOpenDrawer(true) <Grid.Col span={9}>
}} <Group>
> <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Group> <Box w={{
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" /> base: 140,
<Box> xl: 270
<Text c={WARNA.biruTua} fw={"bold"}> }}>
{v.name} <Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1}>{v.name}</Text>
<Text c={"#5A687D"} fz={14} lineClamp={1}>{v.email}</Text>
</Flex>
</Box>
</Group>
</Grid.Col>
<Grid.Col span={3}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'}>
Anggota
</Text> </Text>
<Text c={"#5A687D"} fz={14}> </Grid.Col>
{v.email} </Grid>
</Text> </Box>
</Box>
</Group>
<Text c={WARNA.biruTua} fw={"bold"}>
Anggota
</Text>
</Flex>
); );
})} })}
</Box> </Box>
@@ -123,11 +126,11 @@ export default function ListAnggotaDetailTask() {
</Box> </Box>
<LayoutDrawer opened={openDrawer} title={dataChoose.name} onClose={() => setOpenDrawer(false)}> <LayoutDrawer opened={openDrawer} title={<Text lineClamp={1}>{dataChoose.name}</Text>} onClose={() => setOpenDrawer(false)}>
<Box> <Box>
<Stack pt={10}> <Stack pt={10}>
<SimpleGrid <SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }} cols={{ base: 2, sm: 3, lg: 3 }}
> >
<Flex onClick={() => { router.push('/member/' + dataChoose.id) }} justify={'center'} align={'center'} direction={'column'} > <Flex onClick={() => { router.push('/member/' + dataChoose.id) }} justify={'center'} align={'center'} direction={'column'} >
<Box> <Box>

61
src/module/task/ui/detail_list_tugas_task.tsx
View File

@@ -12,6 +12,7 @@ import { FaCheck, FaPencil, FaTrash } from "react-icons/fa6"
import LayoutModal from "@/module/_global/layout/layout_modal" import LayoutModal from "@/module/_global/layout/layout_modal"
import { globalRefreshTask, valStatusDetailTask } from "../lib/val_task" import { globalRefreshTask, valStatusDetailTask } from "../lib/val_task"
import { useHookstate } from "@hookstate/core" import { useHookstate } from "@hookstate/core"
import "moment/locale/id"
export default function ListTugasDetailTask() { export default function ListTugasDetailTask() {
const [openDrawer, setOpenDrawer] = useState(false) const [openDrawer, setOpenDrawer] = useState(false)
@@ -108,27 +109,22 @@ export default function ListTugasDetailTask() {
isData.map((item, index) => { isData.map((item, index) => {
return ( return (
<Box key={index}> <Box key={index}>
<Grid <Box onClick={() => {
onClick={() => { setIdData(item.id)
setIdData(item.id) setStatusData(item.status)
setStatusData(item.status) setOpenDrawer(true)
setOpenDrawer(true) }}>
}} <Checkbox color="teal" size="md" checked={(item.status === 1) ? true : false} disabled
> label={item.status === 1 ? 'Sudah Selesai' : 'Belum Selesai'}
<Grid.Col span={"auto"}> />
<Center> <Box mt={20}>
<Checkbox color="teal" size="md" checked={(item.status === 1) ? true : false} disabled /> <Box style={{
</Center> borderRadius: 10,
</Grid.Col> border: `1px solid ${"#D6D8F6"}`,
<Grid.Col span={10}> padding: 10
<Box }}>
style={{ <Grid gutter={"sm"} justify='flex-start' align='flex-start'
borderRadius: 10, >
border: `1px solid ${"#D6D8F6"}`,
padding: 10,
}}
>
<Grid gutter={"sm"} justify='flex-start' align='flex-start'>
<Grid.Col span={"auto"}> <Grid.Col span={"auto"}>
<Center > <Center >
<AiOutlineFileSync size={30} /> <AiOutlineFileSync size={30} />
@@ -140,43 +136,34 @@ export default function ListTugasDetailTask() {
</Grid> </Grid>
</Box> </Box>
<Box> <Box>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}> <SimpleGrid cols={{ base: 1, sm: 2, lg: 2 }} mt={20}>
<Box> <Box>
<Text>Tanggal Mulai</Text> <Text>Tanggal Mulai</Text>
<Group <Group
justify="center" justify="center"
bg={"white"} bg={"white"}
h={45} h={45}
style={{ style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
}}
> >
<Text>{item.dateStart}</Text> <Text>{item.dateStart}</Text>
</Group> </Group>
</Box> </Box>
<Box> <Box>
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text> <Text >Tanggal Berakhir</Text>
<Group <Group
justify="center" justify="center"
bg={"white"} bg={"white"}
h={45} h={45}
style={{ style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
}}
> >
<Text>{item.dateEnd}</Text> <Text>{item.dateEnd}</Text>
</Group> </Group>
</Box> </Box>
</SimpleGrid> </SimpleGrid>
</Box> </Box>
</Grid.Col> </Box>
</Grid> </Box>
{isData.length >= 1 <Divider my={"lg"} />
? "" :
<Divider my={"lg"} />
}
</Box> </Box>
) )
}) })

151
src/module/task/ui/list_division_task.tsx
View File

@@ -80,43 +80,62 @@ export default function ListDivisionTask() {
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Box pt={20}> <Box pt={20}>
{loading ? {loading ?
<Box> <Box>
<Skeleton width={"100%"} height={100} radius={"md"} /> <Skeleton width={"100%"} height={100} radius={"md"} />
</Box> </Box>
: :
<Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}> <Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={WARNA.biruTua}>Total Kegiatan</Text> <Text fw={'bold'} c={WARNA.biruTua}>Total Kegiatan</Text>
<Flex justify={'center'} align={'center'} h={'100%'}> <Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={WARNA.biruTua}>{isData.length}</Text> <Text fz={40} fw={'bold'} c={WARNA.biruTua}>{isData.length}</Text>
</Flex> </Flex>
</Box> </Box>
} }
{isList ? ( {isList ? (
<Box pt={20}> <Box pt={20}>
{isData.map((v, i) => { {isData.map((v, i) => {
return ( return (
<Box key={i}> <Box key={i}>
<Group justify="space-between" mb={10} onClick={() => router.push(`task/${v.id}`)}> <Grid align='center'>
<Group> <Grid.Col span={{
<Center> base: 2,
<ActionIcon xl: 1
variant="gradient" }}>
size={50} <Group onClick={() => router.push(`task/${v.id}`)}>
aria-label="Gradient action icon" <Center>
radius={100} <ActionIcon
gradient={{ variant="gradient"
from: '#DFDA7C', size={50}
to: '#F2AF46', aria-label="Gradient action icon"
deg: 174 radius={100}
}} gradient={{
> from: '#DFDA7C',
<HiMiniPresentationChartBar size={25} color={WARNA.biruTua} /> to: '#F2AF46',
</ActionIcon> deg: 174
</Center> }}
<Text>{v.title}</Text> >
</Group> <HiMiniPresentationChartBar size={25} color={WARNA.biruTua} />
</Group> </ActionIcon>
</Center>
</Group>
</Grid.Col>
<Grid.Col span={{
base: 10,
xl: 11
}}>
<Box>
<Box w={{
base: 280,
xl: 430
}}>
<Text truncate="end" pl={20}>
{v.title}
</Text>
</Box>
</Box>
</Grid.Col>
</Grid>
<Divider my="sm" /> <Divider my="sm" />
</Box> </Box>
); );
@@ -124,52 +143,52 @@ export default function ListDivisionTask() {
</Box> </Box>
) : ( ) : (
<Box pt={20}> <Box pt={20}>
{loading ? {loading ?
Array(3) Array(3)
.fill(null) .fill(null)
.map((_, i) => ( .map((_, i) => (
<Box key={i} mb={20}> <Box key={i} mb={20}>
<Skeleton width={"100%"} height={200} radius={"md"} /> <Skeleton width={"100%"} height={200} radius={"md"} />
</Box> </Box>
)) ))
: :
_.isEmpty(isData) _.isEmpty(isData)
? ?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}> <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Tugas</Text> <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Tugas</Text>
</Box> </Box>
: :
isData.map((v: any, i: any) => { isData.map((v: any, i: any) => {
return ( return (
<Box key={i} mb={20}> <Box key={i} mb={20}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`task/${v.id}`)}> <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`task/${v.id}`)}>
<Card.Section> <Card.Section>
<Box h={120} bg={WARNA.biruTua}> <Box h={120} bg={WARNA.biruTua}>
<Flex justify={'center'} align={'center'} h={"100%"}> <Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
<Title order={3} c={"white"} lineClamp={1}>{v.title}</Title> <Title order={3} c={"white"} ta={"center"} lineClamp={2}>{v.title}</Title>
</Flex> </Flex>
</Box>
</Card.Section>
<Box pt={10}>
<Progress.Root size="xl" radius="xl" style={{ border: `1px solid ${'#BDBDBD'}` }}>
<Progress.Section value={v.progress} color="yellow" striped >
<Progress.Label>{v.progress}%</Progress.Label>
</Progress.Section>
</Progress.Root>
<Text my={10}>{v.desc}</Text>
<Group align='center' pt={10} justify='space-between'>
<Avatar.Group>
<Avatar>
<MdAccountCircle size={32} color={WARNA.biruTua} />
</Avatar>
<Avatar>+{v.member - 1}</Avatar>
</Avatar.Group>
</Group>
</Box> </Box>
</Card.Section> </Card>
<Box pt={10}> </Box>
<Progress.Root size="xl" radius="xl" style={{ border: `1px solid ${'#BDBDBD'}` }}> );
<Progress.Section value={v.progress} color="yellow" striped > })
<Progress.Label>{v.progress}%</Progress.Label>
</Progress.Section>
</Progress.Root>
<Text my={10}>{v.desc}</Text>
<Group align='center' pt={10} justify='space-between'>
<Avatar.Group>
<Avatar>
<MdAccountCircle size={32} color={WARNA.biruTua} />
</Avatar>
<Avatar>+{v.member - 1}</Avatar>
</Avatar.Group>
</Group>
</Box>
</Card>
</Box>
);
})
} }
</Box> </Box>
)} )}