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

style : update responsive

Browse Source 
Deskripsi:
- update task api
- update divisio
- update task

No Issue
This commit is contained in:
lukman
2024-09-03 16:30:23 +08:00
parent 10d9cd54f9
commit 8acf704ffa
7 changed files with 205 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@@ -1,6 +1,6 @@
'use client'
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 { useParams, useRouter } from "next/navigation";
import { useState } from "react";
@@ -91,31 +91,34 @@ export default function ListAnggotaDetailTask() {
isData.length === 0 ? <Text>Tidak ada anggota</Text> :
isData.map((v, i) => {
return (
<Flex
justify={"space-between"}
align={"center"}
mt={20}
key={i}
onClick={() => {
setDataChoose({ id: v.idUser, name: v.name })
setOpenDrawer(true)
}}
>
<Group>
<Avatar src={`/api/file/img?cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{v.name}
<Box key={i}>
<Grid align='center' mt={10}
onClick={() => {
setDataChoose({ id: v.idUser, name: v.name })
setOpenDrawer(true)
}}
>
<Grid.Col span={9}>
<Group>
<Avatar src={`/api/file/img?cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Box w={{
base: 140,
xl: 270
}}>
<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 c={"#5A687D"} fz={14}>
{v.email}
</Text>
</Box>
</Group>
<Text c={WARNA.biruTua} fw={"bold"}>
Anggota
</Text>
</Flex>
</Grid.Col>
</Grid>
</Box>
);
})}
</Box>
@@ -123,11 +126,11 @@ export default function ListAnggotaDetailTask() {
</Box>
<LayoutDrawer opened={openDrawer} title={dataChoose.name} onClose={() => setOpenDrawer(false)}>
<LayoutDrawer opened={openDrawer} title={<Text lineClamp={1}>{dataChoose.name}</Text>} onClose={() => setOpenDrawer(false)}>
<Box>
<Stack pt={10}>
<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'} >
<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 { globalRefreshTask, valStatusDetailTask } from "../lib/val_task"
import { useHookstate } from "@hookstate/core"
import "moment/locale/id"
export default function ListTugasDetailTask() {
const [openDrawer, setOpenDrawer] = useState(false)
@@ -108,27 +109,22 @@ export default function ListTugasDetailTask() {
isData.map((item, index) => {
return (
<Box key={index}>
<Grid
onClick={() => {
setIdData(item.id)
setStatusData(item.status)
setOpenDrawer(true)
}}
>
<Grid.Col span={"auto"}>
<Center>
<Checkbox color="teal" size="md" checked={(item.status === 1) ? true : false} disabled />
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Box
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 10,
}}
>
<Grid gutter={"sm"} justify='flex-start' align='flex-start'>
<Box onClick={() => {
setIdData(item.id)
setStatusData(item.status)
setOpenDrawer(true)
}}>
<Checkbox color="teal" size="md" checked={(item.status === 1) ? true : false} disabled
label={item.status === 1 ? 'Sudah Selesai' : 'Belum Selesai'}
/>
<Box mt={20}>
<Box style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 10
}}>
<Grid gutter={"sm"} justify='flex-start' align='flex-start'
>
<Grid.Col span={"auto"}>
<Center >
<AiOutlineFileSync size={30} />
@@ -140,43 +136,34 @@ export default function ListTugasDetailTask() {
</Grid>
</Box>
<Box>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
<SimpleGrid cols={{ base: 1, sm: 2, lg: 2 }} mt={20}>
<Box>
<Text>Tanggal Mulai</Text>
<Group
justify="center"
bg={"white"}
h={45}
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
}}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<Text>{item.dateStart}</Text>
</Group>
</Box>
<Box>
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
<Text >Tanggal Berakhir</Text>
<Group
justify="center"
bg={"white"}
h={45}
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
}}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<Text>{item.dateEnd}</Text>
</Group>
</Box>
</SimpleGrid>
</Box>
</Grid.Col>
</Grid>
{isData.length >= 1
? "" :
<Divider my={"lg"} />
}
</Box>
</Box>
<Divider my={"lg"} />
</Box>
)
})

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

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