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

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

Browse Source 
style : update responsive project
This commit is contained in:
Amalia
2024-09-03 17:48:42 +08:00
committed by GitHub
parent 274e9f54e9 eec3d769ec
commit 6bebd7dbfa
10 changed files with 350 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/module/_global/layout/layout_modal_view_file.tsx
View File

@@ -13,17 +13,18 @@ export default function LayoutModal({ opened, onClose, extension, fitur, file }:
margin: 10, margin: 10,
}, },
content: { content: {
border: `2px solid ${'#828AFC'}`, maxWidth: 550,
borderRadius: 10
} }
}} opened={opened} onClose={onClose} withCloseButton={true} centered closeOnClickOutside={false}> }} opened={opened} onClose={onClose} withCloseButton={true} centered closeOnClickOutside={false} fullScreen>
{ {
extension === 'pdf' ? <PdfToImage md={filePdf} /> : extension === 'pdf' ? <PdfToImage md={filePdf} /> :
<Image <Image
radius="md" radius="md"
h={200} style={{
w="auto" maxWidth: '100%',
maxHeight: '100%',
}}
fit="contain" fit="contain"
src={`/api/file/img?cat=${fitur}&file=${file}&jenis=file`} src={`/api/file/img?cat=${fitur}&file=${file}&jenis=file`}
/> />

2
src/module/project/ui/add_detail_task_project.tsx
View File

@@ -93,7 +93,7 @@ export default function AddDetailTaskProject() {
</Group> </Group>
</Box> </Box>
</SimpleGrid> </SimpleGrid>
<Stack pt={15}> <Stack pt={15} pb={100}>
<TextInput <TextInput
styles={{ styles={{
input: { input: {

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

@@ -5,7 +5,7 @@ import { IDataMemberProject, IDataMemberProjectDetail } from '../lib/type_projec
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 { useShallowEffect } from '@mantine/hooks';
import { Avatar, Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core'; import { Avatar, Box, Button, Divider, Flex, Grid, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global'; import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import { FaCheck } from 'react-icons/fa6'; import { FaCheck } from 'react-icons/fa6';
import LayoutModal from '@/module/_global/layout/layout_modal'; import LayoutModal from '@/module/_global/layout/layout_modal';
@@ -118,20 +118,20 @@ export default function AddMemberDetailProject() {
</Group> </Group>
{loading ? {loading ?
Array(8) Array(8)
.fill(null) .fill(null)
.map((_, i) => ( .map((_, i) => (
<Box key={i} mb={10}> <Box key={i} mb={10}>
<SkeletonSingle/> <SkeletonSingle />
</Box> </Box>
)) ))
: :
<Box mt={15} mb={100}> <Box mt={15} mb={100}>
{isData.map((v, i) => { {isData.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser); const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
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"}> {/* <Flex justify={"space-between"} align={"center"}>
<Group> <Group>
<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"> <Stack align="flex-start" justify="flex-start">
@@ -156,21 +156,44 @@ export default function AddMemberDetailProject() {
{isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""} {isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text> </Text>
</Flex> </Flex>
<Divider my={"md"} /> <Divider my={"md"} /> */}
</Box> <Grid align='center'>
); <Grid.Col span={{
})} base: 3,
</Box> xl: 2
} }}>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${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>
<Text c={"dimmed"}>{(found) ? "sudah menjadi anggota" : ""}</Text>
</Flex>
{isSelected ? <FaCheck /> : null}
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</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}`,
}}> }}>
{loading ? {loading ?
<Skeleton height={50} radius={30} /> <Skeleton height={50} radius={30} />
: :
<Button <Button
c={"white"} c={"white"}
bg={WARNA.biruTua} bg={WARNA.biruTua}
@@ -181,8 +204,8 @@ export default function AddMemberDetailProject() {
> >
Simpan Simpan
</Button> </Button>
} }
</Box> </Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)} <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin menambahkan anggota?" description="Apakah Anda yakin ingin menambahkan anggota?"

386
src/module/project/ui/create_project.tsx
View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global"; import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
import { Avatar, Box, Button, Center, Flex, Group, rem, Select, SimpleGrid, Stack, Text, TextInput } from "@mantine/core"; import { Avatar, Box, Button, Center, Divider, Flex, Grid, Group, rem, Select, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
import { useRouter, useSearchParams } from "next/navigation"; import { useRouter, useSearchParams } from "next/navigation";
import React, { useRef, useState } from "react"; import React, { useRef, useState } from "react";
import { IoIosArrowDropright } from "react-icons/io"; import { IoIosArrowDropright } from "react-icons/io";
@@ -227,166 +227,174 @@ export default function CreateProject() {
</Stack> </Stack>
<Box pb={100}> <Box pb={100}>
{ {
dataTask.length > 0 && dataTask.length > 0 &&
<Box pt={20}> <Box pt={20}>
<Text fw={'bold'} c={WARNA.biruTua}>Tanggal & Tugas</Text> <Text fw={'bold'} c={WARNA.biruTua}>Tanggal & Tugas</Text>
{
dataTask.map((v, i) => {
return (
<Box key={i} onClick={() => {
setIndexDelTask(i)
setOpenDrawerTask(true)
}}>
<ResultsDateAndTask dateStart={v.dateStart} dateEnd={v.dateEnd} title={v.title} />
</Box>
)
})
}
</Box>
}
{
listFile.length > 0 &&
<Box pt={20}>
<Text fw={'bold'} c={WARNA.biruTua}>File</Text>
<Box bg={"white"} style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 20
}}>
{ {
listFile.map((v, i) => { dataTask.map((v, i) => {
return ( return (
<Box key={i} onClick={() => { <Box key={i} onClick={() => {
setIndexDelFile(i) setIndexDelTask(i)
setOpenDrawerFile(true) setOpenDrawerTask(true)
}}> }}>
<ResultsFile name={v.name} extension={v.extension} /> <ResultsDateAndTask dateStart={v.dateStart} dateEnd={v.dateEnd} title={v.title} />
</Box> </Box>
) )
}) })
} }
</Box> </Box>
</Box> }
}
{ {
member.length > 0 && listFile.length > 0 &&
<Box pt={30}> <Box pt={20}>
<Group justify="space-between"> <Text fw={'bold'} c={WARNA.biruTua}>File</Text>
<Text c={WARNA.biruTua}>Anggota Terpilih</Text> <Box bg={"white"} style={{
<Text c={WARNA.biruTua}>Total {member.length} Anggota</Text> borderRadius: 10,
</Group> border: `1px solid ${"#D6D8F6"}`,
<Box pt={10}> padding: 20
<Box mb={20}> }}>
<Box {
style={{ listFile.map((v, i) => {
border: `1px solid ${"#C7D6E8"}`,
borderRadius: 10,
}}
px={20}
py={10}
>
{member.get().map((v: any, i: any) => {
return ( return (
<Flex <Box key={i} onClick={() => {
justify={"space-between"} setIndexDelFile(i)
align={"center"} setOpenDrawerFile(true)
mt={20} }}>
key={i} <ResultsFile name={v.name} extension={v.extension} />
> </Box>
<Group> )
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" /> })
<Box> }
<Text c={WARNA.biruTua} fw={"bold"}> </Box>
{v.name} </Box>
}
{
member.length > 0 &&
<Box pt={30}>
<Group justify="space-between">
<Text c={WARNA.biruTua}>Anggota Terpilih</Text>
<Text c={WARNA.biruTua}>Total {member.length} Anggota</Text>
</Group>
<Box pt={10}>
<Box mb={20}>
<Box
style={{
border: `1px solid ${"#C7D6E8"}`,
borderRadius: 10,
}}
px={20}
py={10}
>
{member.get().map((v: any, i: any) => {
return (
<Box key={i}>
<Grid align='center' mt={10}
>
<Grid.Col span={9}>
<Group>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Box w={{
base: 140,
xl: 270
}}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
{v.name}
</Text>
</Box>
</Group>
</Grid.Col>
<Grid.Col span={3}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'}>
Anggota
</Text> </Text>
</Box> </Grid.Col>
</Group> </Grid>
<Text c={WARNA.biruTua} fw={"bold"}> <Box mt={10}>
Anggota <Divider size={"xs"} />
</Text> </Box>
</Flex> </Box>
); );
})} })}
</Box> </Box>
</Box> </Box>
</Box> </Box>
</Box> </Box>
} }
</Box>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => {
if (
body.title !== "" &&
body.idGroup !== ""
) {
setModal(true)
} else {
toast.error("Mohon lengkapi data terlebih dahulu");
}
}}>
Simpan
</Button>
</Box> </Box>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => {
if (
body.title !== "" &&
body.idGroup !== ""
) {
setModal(true)
} else {
toast.error("Mohon lengkapi data terlebih dahulu");
}
}}>
Simpan
</Button>
</Box>
{/* Drawer pilih file */}
{/* Drawer pilih file */} <LayoutDrawer
<LayoutDrawer opened={openDrawer}
opened={openDrawer} onClose={() => setOpenDrawer(false)}
onClose={() => setOpenDrawer(false)} title={"Pilih File"}
title={"Pilih File"} >
> <Flex justify={"flex-start"} px={20}>
<Flex justify={"flex-start"} px={20}> <Dropzone
<Dropzone openRef={openRef}
openRef={openRef} onDrop={async (files) => {
onDrop={async (files) => { if (!files || _.isEmpty(files))
if (!files || _.isEmpty(files)) return toast.error('Tidak ada file yang dipilih')
return toast.error('Tidak ada file yang dipilih') setFileForm([...fileForm, files[0]])
setFileForm([...fileForm, files[0]]) setListFile([...listFile, { name: files[0].name, extension: files[0].type.split("/")[1] }])
setListFile([...listFile, { name: files[0].name, extension: files[0].type.split("/")[1] }]) }}
}} activateOnClick={false}
activateOnClick={false} maxSize={3 * 1024 ** 2}
maxSize={3 * 1024 ** 2} accept={['text/csv', 'image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
accept={['text/csv', 'image/png', 'image/jpeg', 'image/heic', 'application/pdf']} onReject={(files) => {
onReject={(files) => { return toast.error('File yang diizinkan: .csv, .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
return toast.error('File yang diizinkan: .csv, .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB') }}
}} >
> <Box onClick={() => openRef.current?.()}>
<Box onClick={() => openRef.current?.()}> <Box
<Box bg={"#DCEED8"}
bg={"#DCEED8"} style={{
style={{ border: `1px solid ${"#D6D8F6"}`,
border: `1px solid ${"#D6D8F6"}`, padding: 20,
padding: 20, borderRadius: 10,
borderRadius: 10, }}
}} >
> <Center>
<Center> <BsFiletypeCsv size={40} />
<BsFiletypeCsv size={40} /> </Center>
</Center> </Box>
<Text mt={10} ta={"center"}>
Pilih file
</Text>
<Text ta={"center"}>diperangkat</Text>
</Box> </Box>
<Text mt={10} ta={"center"}> </Dropzone>
Pilih file {/* <Box onClick={() => router.push("/project/create?page=file-save")}>
</Text>
<Text ta={"center"}>diperangkat</Text>
</Box>
</Dropzone>
{/* <Box onClick={() => router.push("/project/create?page=file-save")}>
<Box <Box
bg={"#DCEED8"} bg={"#DCEED8"}
style={{ style={{
@@ -404,61 +412,61 @@ export default function CreateProject() {
</Text> </Text>
<Text ta={"center"}>sudah ada</Text> <Text ta={"center"}>sudah ada</Text>
</Box> */} </Box> */}
</Flex> </Flex>
</LayoutDrawer> </LayoutDrawer>
{/* Drawer hapus file */} {/* Drawer hapus file */}
<LayoutDrawer <LayoutDrawer
opened={openDrawerFile} opened={openDrawerFile}
onClose={() => setOpenDrawerFile(false)} onClose={() => setOpenDrawerFile(false)}
title={""} title={""}
> >
<Stack pt={10}> <Stack pt={10}>
<SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} > <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} >
<Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => deleteFile(indexDelFile)}> <Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => deleteFile(indexDelFile)}>
<Box> <Box>
<FaTrash size={30} color={WARNA.biruTua} /> <FaTrash size={30} color={WARNA.biruTua} />
</Box> </Box>
<Box> <Box>
<Text c={WARNA.biruTua} ta='center'>Hapus File</Text> <Text c={WARNA.biruTua} ta='center'>Hapus File</Text>
</Box> </Box>
</Flex> </Flex>
</SimpleGrid> </SimpleGrid>
</Stack> </Stack>
</LayoutDrawer> </LayoutDrawer>
{/* Drawer hapus tugas */} {/* Drawer hapus tugas */}
<LayoutDrawer <LayoutDrawer
opened={openDrawerTask} opened={openDrawerTask}
onClose={() => setOpenDrawerTask(false)} onClose={() => setOpenDrawerTask(false)}
title={""} title={""}
> >
<Stack pt={10}> <Stack pt={10}>
<SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} > <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} >
<Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => deleteTask(indexDelTask)}> <Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => deleteTask(indexDelTask)}>
<Box> <Box>
<FaTrash size={30} color={WARNA.biruTua} /> <FaTrash size={30} color={WARNA.biruTua} />
</Box> </Box>
<Box> <Box>
<Text c={WARNA.biruTua} ta='center'>Hapus Tugas</Text> <Text c={WARNA.biruTua} ta='center'>Hapus Tugas</Text>
</Box> </Box>
</Flex> </Flex>
</SimpleGrid> </SimpleGrid>
</Stack> </Stack>
</LayoutDrawer> </LayoutDrawer>
<LayoutModal opened={isModal} onClose={() => setModal(false)} <LayoutModal opened={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin menambahkan data?" description="Apakah Anda yakin ingin menambahkan data?"
onYes={(val) => { onYes={(val) => {
if (val) { if (val) {
onSubmit() onSubmit()
} }
setModal(false) setModal(false)
}} /> }} />
</Box > </Box >
); );
} }

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

@@ -116,7 +116,7 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
<Center> <Center>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="xl" /> <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="xl" />
</Center> </Center>
<Text mt={20} ta="center"> <Text mt={20} ta="center" lineClamp={1}>
{v.name} {v.name}
</Text> </Text>
</Box> </Box>

55
src/module/project/ui/list_anggota_detail_project.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 { Avatar, Box, Flex, Group, SimpleGrid, Stack, Text } from '@mantine/core'; import { Avatar, Box, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { funDeleteMemberProject, funGetOneProjectById } from '../lib/api_project'; import { funDeleteMemberProject, funGetOneProjectById } from '../lib/api_project';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
@@ -89,42 +89,45 @@ export default function ListAnggotaDetailProject() {
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}
onClick={() => {
setDataChoose({ id: v.idUser, name: v.name })
setOpenDrawer(true) setOpenDrawer(true)
}} }}
> >
<Group> <Grid.Col span={9}>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" /> <Group>
<Box> <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Text c={WARNA.biruTua} fw={"bold"}> <Box w={{
{v.name} 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>
<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>
</Box> </Box>
</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>

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

@@ -121,8 +121,11 @@ export default function ListProject() {
{isData.map((v, i) => { {isData.map((v, i) => {
return ( return (
<Box key={i}> <Box key={i}>
<Grid align='center' gutter={10}> <Grid align='center'>
<Grid.Col span={1}> <Grid.Col span={{
base: 2,
xl: 1
}}>
<Group onClick={() => router.push(`/project/${v.id}`)}> <Group onClick={() => router.push(`/project/${v.id}`)}>
<Center> <Center>
<ActionIcon <ActionIcon
@@ -141,18 +144,20 @@ export default function ListProject() {
</Center> </Center>
</Group> </Group>
</Grid.Col> </Grid.Col>
<Grid.Col span={11}> <Grid.Col span={{
base: 10,
xl: 11
}}>
<Group justify='space-between' align='center'> <Group justify='space-between' align='center'>
<Box> <Box>
<Box w={{ <Box w={{
base: 280, base: 230,
xl: 430 xl: 430
}}> }}>
<Text truncate="end" pl={20}> <Text truncate="end" pl={20}>
{v.title} {v.title}
</Text> </Text>
</Box> </Box>
{/* <Text lineClamp={1}></Text> */}
</Box> </Box>
<RiCircleFill size={12} color={ <RiCircleFill size={12} color={

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

@@ -106,77 +106,61 @@ export default function ListTugasDetailProject() {
isData.map((item, index) => { isData.map((item, index) => {
return ( return (
<Box key={index} mb={20}> <Box key={index} mb={20}>
<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} />
</Center> </Center>
</Grid.Col> </Grid.Col>
<Grid.Col span={10}> <Grid.Col span={10}>
<Text>{item.title}</Text> <Text>{item.title}</Text>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Group>
</Group>
</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>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>
) )
}) })

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

@@ -143,7 +143,7 @@ export default function AddMemberDetailTask() {
</Box> </Box>
)) ))
: :
<Box mt={15} mb={60}> <Box mt={15} mb={100}>
{isData.map((v, i) => { {isData.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser); const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
const found = isDataMember.some((i: any) => i.idUser == v.idUser) const found = isDataMember.some((i: any) => i.idUser == v.idUser)

44
src/module/task/ui/create_task.tsx
View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global"; import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
import { Avatar, Box, Button, Center, Flex, Group, Input, rem, SimpleGrid, Stack, Text, TextInput } from "@mantine/core"; import { Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Input, rem, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import React, { useRef, useState } from "react"; import React, { useRef, useState } from "react";
import { IoIosArrowDropright } from "react-icons/io"; import { IoIosArrowDropright } from "react-icons/io";
@@ -230,24 +230,32 @@ export default function CreateTask() {
> >
{member.get().map((v: any, i: any) => { {member.get().map((v: any, i: any) => {
return ( return (
<Flex <Box key={i}>
justify={"space-between"} <Grid align='center' mt={10}
align={"center"} >
mt={20} <Grid.Col span={9}>
key={i} <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} <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
{v.name}
</Text>
</Box>
</Group>
</Grid.Col>
<Grid.Col span={3}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'}>
Anggota
</Text> </Text>
</Box> </Grid.Col>
</Group> </Grid>
<Text c={WARNA.biruTua} fw={"bold"}> <Box mt={10}>
Anggota <Divider size={"xs"} />
</Text> </Box>
</Flex> </Box>
); );
})} })}
</Box> </Box>