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

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

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

37
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}
<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?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{v.name}
</Text>
<Text c={"#5A687D"} fz={14}>
{v.email}
</Text>
<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>
<Text c={WARNA.biruTua} fw={"bold"}>
</Grid.Col>
<Grid.Col span={3}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'}>
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={

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

@@ -106,27 +106,22 @@ export default function ListTugasDetailProject() {
isData.map((item, index) => {
return (
<Box key={index} mb={20}>
<Grid
onClick={() => {
<Box 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={{
}}>
<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,
}}
padding: 10
}}>
<Grid gutter={"sm"} justify='flex-start' align='flex-start'
>
<Grid gutter={"sm"} justify='flex-start' align='flex-start'>
<Grid.Col span={"auto"}>
<Center >
<AiOutlineFileSync size={30} />
@@ -136,21 +131,16 @@ export default function ListTugasDetailProject() {
<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>
@@ -161,22 +151,16 @@ export default function ListTugasDetailProject() {
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
? "" :
</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)

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