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: {

31
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';
@@ -121,7 +121,7 @@ export default function AddMemberDetailProject() {
.fill(null) .fill(null)
.map((_, i) => ( .map((_, i) => (
<Box key={i} mb={10}> <Box key={i} mb={10}>
<SkeletonSingle/> <SkeletonSingle />
</Box> </Box>
)) ))
: :
@@ -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={

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

@@ -106,29 +106,24 @@ 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} />
</Center> </Center>
</Grid.Col> </Grid.Col>
@@ -136,47 +131,36 @@ 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>
</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)

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>