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,
},
content: {
border: `2px solid ${'#828AFC'}`,
borderRadius: 10
maxWidth: 550,
}
}} opened={opened} onClose={onClose} withCloseButton={true} centered closeOnClickOutside={false}>
}} opened={opened} onClose={onClose} withCloseButton={true} centered closeOnClickOutside={false} fullScreen>
{
extension === 'pdf' ? <PdfToImage md={filePdf} /> :
<Image
radius="md"
h={200}
w="auto"
style={{
maxWidth: '100%',
maxHeight: '100%',
}}
fit="contain"
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>
</Box>
</SimpleGrid>
<Stack pt={15}>
<Stack pt={15} pb={100}>
<TextInput
styles={{
input: {

83
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 { funAddMemberProject, funGetAllMemberById, funGetOneProjectById } from '../lib/api_project';
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 { FaCheck } from 'react-icons/fa6';
import LayoutModal from '@/module/_global/layout/layout_modal';
@@ -116,22 +116,22 @@ export default function AddMemberDetailProject() {
</Text>
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Group>
{loading ?
{loading ?
Array(8)
.fill(null)
.map((_, i) => (
<Box key={i} mb={10}>
<SkeletonSingle/>
</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}>
<Flex justify={"space-between"} align={"center"}>
.fill(null)
.map((_, i) => (
<Box key={i} mb={10}>
<SkeletonSingle />
</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}>
{/* <Flex justify={"space-between"} align={"center"}>
<Group>
<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">
@@ -156,21 +156,44 @@ export default function AddMemberDetailProject() {
{isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Flex>
<Divider my={"md"} />
</Box>
);
})}
</Box>
}
<Divider my={"md"} /> */}
<Grid align='center'>
<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" />
</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 pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
{loading ?
{loading ?
<Skeleton height={50} radius={30} />
:
:
<Button
c={"white"}
bg={WARNA.biruTua}
@@ -181,8 +204,8 @@ export default function AddMemberDetailProject() {
>
Simpan
</Button>
}
</Box>
}
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin menambahkan anggota?"

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

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

55
src/module/project/ui/list_anggota_detail_project.tsx
View File

@@ -1,6 +1,6 @@
'use client'
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 { funDeleteMemberProject, funGetOneProjectById } from '../lib/api_project';
import toast from 'react-hot-toast';
@@ -89,42 +89,45 @@ export default function ListAnggotaDetailProject() {
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 })
<Box key={i}>
<Grid align='center' mt={10}
onClick={() => {
setDataChoose({ id: v.idUser, name: v.name })
setOpenDrawer(true)
}}
>
<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"}>
{v.name}
}}
>
<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
}}>
<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>
</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>
<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>

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

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

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

@@ -143,7 +143,7 @@ export default function AddMemberDetailTask() {
</Box>
))
:
<Box mt={15} mb={60}>
<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)

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

@@ -1,6 +1,6 @@
"use client";
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 React, { useRef, useState } from "react";
import { IoIosArrowDropright } from "react-icons/io";
@@ -230,24 +230,32 @@ export default function CreateTask() {
>
{member.get().map((v: any, i: any) => {
return (
<Flex
justify={"space-between"}
align={"center"}
mt={20}
key={i}
>
<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"}>
{v.name}
<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>
</Box>
</Group>
<Text c={WARNA.biruTua} fw={"bold"}>
Anggota
</Text>
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box>
);
})}
</Box>