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

style : update responsive project

Browse Source 
Deskripsi:
- update task
- update project

No issue
This commit is contained in:
lukman
2024-09-03 17:46:52 +08:00
parent 596b3cf151
commit eec3d769ec
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: {

29
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';
@@ -131,7 +131,7 @@ export default function AddMemberDetailProject() {
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,7 +156,30 @@ export default function AddMemberDetailProject() {
{isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""} {isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text> </Text>
</Flex> </Flex>
<Divider my={"md"} /> <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>
); );
})} })}

28
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";
@@ -290,24 +290,32 @@ export default function CreateProject() {
> >
{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}
key={i}
> >
<Grid.Col span={9}>
<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" />
<Box> <Box w={{
<Text c={WARNA.biruTua} fw={"bold"}> base: 140,
xl: 270
}}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
{v.name} {v.name}
</Text> </Text>
</Box> </Box>
</Group> </Group>
<Text c={WARNA.biruTua} fw={"bold"}> </Grid.Col>
<Grid.Col span={3}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'}>
Anggota Anggota
</Text> </Text>
</Flex> </Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box>
); );
})} })}
</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>

37
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"}
mt={20}
key={i}
onClick={() => { onClick={() => {
setDataChoose({ id: v.idUser, name: v.name }) setDataChoose({ id: v.idUser, name: v.name })
setOpenDrawer(true) setOpenDrawer(true)
}} }}
> >
<Grid.Col span={9}>
<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" />
<Box> <Box w={{
<Text c={WARNA.biruTua} fw={"bold"}> base: 140,
{v.name} xl: 270
</Text> }}>
<Text c={"#5A687D"} fz={14}> <Flex direction={'column'} align="flex-start" justify="flex-start">
{v.email} <Text lineClamp={1}>{v.name}</Text>
</Text> <Text c={"#5A687D"} fz={14} lineClamp={1}>{v.email}</Text>
</Flex>
</Box> </Box>
</Group> </Group>
<Text c={WARNA.biruTua} fw={"bold"}> </Grid.Col>
<Grid.Col span={3}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'}>
Anggota Anggota
</Text> </Text>
</Flex> </Grid.Col>
</Grid>
</Box>
); );
})} })}
</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={

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

@@ -106,27 +106,22 @@ 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
<Grid.Col span={"auto"}> label={item.status === 1 ? 'Sudah Selesai' : 'Belum Selesai'}
<Center> />
<Checkbox color="teal" size="md" checked={(item.status === 1) ? true : false} disabled /> <Box mt={20}>
</Center> <Box style={{
</Grid.Col>
<Grid.Col span={10}>
<Box
style={{
borderRadius: 10, borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`, border: `1px solid ${"#D6D8F6"}`,
padding: 10, padding: 10
}} }}>
<Grid gutter={"sm"} justify='flex-start' align='flex-start'
> >
<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} />
@@ -136,21 +131,16 @@ export default function ListTugasDetailProject() {
<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>
@@ -161,22 +151,16 @@ export default function ListTugasDetailProject() {
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)

28
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}
key={i}
> >
<Grid.Col span={9}>
<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" />
<Box> <Box w={{
<Text c={WARNA.biruTua} fw={"bold"}> base: 140,
xl: 270
}}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
{v.name} {v.name}
</Text> </Text>
</Box> </Box>
</Group> </Group>
<Text c={WARNA.biruTua} fw={"bold"}> </Grid.Col>
<Grid.Col span={3}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'}>
Anggota Anggota
</Text> </Text>
</Flex> </Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box>
); );
})} })}
</Box> </Box>