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

style : update revisi style

Browse Source
This commit is contained in:
lukman
2024-09-25 10:01:09 +08:00
parent 0db13c9e5e
commit 63b590c449
7 changed files with 98 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
import { IDataMemberProject, IDataMemberProjectDetail } from '../lib/type_project';
import toast from 'react-hot-toast';
import { funAddMemberProject, funGetAllMemberById, funGetOneProjectById } from '../lib/api_project';
import { useShallowEffect } from '@mantine/hooks';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { LayoutNavbarNew, SkeletonSingle, TEMA, WARNA } from '@/module/_global';
import { FaCheck } from 'react-icons/fa6';
@@ -26,6 +26,7 @@ export default function AddMemberDetailProject() {
const [onClickSearch, setOnClickSearch] = useState(false)
const [searchQuery, setSearchQuery] = useState('')
const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 438px)");
async function getData() {
@@ -231,20 +232,32 @@ export default function AddMemberDetailProject() {
return (
<Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}>
<Grid align='center'>
<Grid.Col span={{
base: 3,
xl: 2
}}>
<Grid.Col
span={{
base: 1,
xs: 1,
sm: 1,
md: 1,
lg: 1,
xl: 1,
}}
>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
</Grid.Col>
<Grid.Col span={{
base: 9,
xl: 10
}}>
<Grid.Col
span={{
base: 11,
xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}
>
<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>
<Text lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
<Text c={"dimmed"} pl={isMobile2 ? 40 : 30}>{(found) ? "sudah menjadi anggota" : ""}</Text>
</Flex>
{isSelected ? <FaCheck /> : null}
</Flex>

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

@@ -137,7 +137,7 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
borderBottom: `1px solid ${"#E0DFDF"}`
}}>
{selectedFiles.length > 0 ? (
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
{selectedFiles.map((v: any, i: any) => {
return (
<Carousel.Slide key={i}>
@@ -180,12 +180,17 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
</Box>
))
:
dataMember.map((v, index) => {
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
return (
<Box mb={10} key={index} onClick={() => handleFileClick(index)}>
<Grid align='center'>
<Grid.Col span={{
(dataMember.length === 0) ?
<Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
</Stack>
:
dataMember.map((v, index) => {
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
return (
<Box mb={10} key={index} onClick={() => handleFileClick(index)}>
<Grid align='center'>
<Grid.Col span={{
base: 1,
xs: 1,
sm: 1,
@@ -193,9 +198,9 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
lg: 1,
xl: 1,
}}>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
</Grid.Col>
<Grid.Col span={{
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
</Grid.Col>
<Grid.Col span={{
base: 11,
xs: 11,
sm: 11,
@@ -203,20 +208,20 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
lg: 11,
xl: 11,
}}>
<Flex justify='space-between' align={"center"}>
<Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
<Flex justify='space-between' align={"center"}>
<Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
</Flex>
{isSelected ? <FaCheck /> : null}
</Flex>
{isSelected ? <FaCheck /> : null}
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider my={10} />
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider my={10} />
</Box>
</Box>
</Box>
);
})
);
})
}
</Box>
</Stack>

6
src/module/project/ui/edit_detail_task_project.tsx
View File

@@ -76,7 +76,7 @@ export default function EditDetailTaskProject() {
return (
<Box>
<LayoutNavbarNew back="" title={"Edit Detail Kegiatan"} menu />
<LayoutNavbarNew back="" title={"Edit Tanggal dan tugas"} menu />
<Box p={20}>
<Group
justify="center"
@@ -140,7 +140,7 @@ export default function EditDetailTaskProject() {
borderRadius: 10,
},
}}
placeholder="Input Nama Tahapan"
placeholder="Input Judul Tahapan"
label="Judul Tahapan"
required
size="md"
@@ -149,7 +149,7 @@ export default function EditDetailTaskProject() {
onBlur={() => setTouched({ ...touched, title: true })}
error={
touched.title && (
name == "" ? "Judul Tidak Boleh Kosong" : null
name == "" ? "Judul Tahapan Tidak Boleh Kosong" : null
)
}
/>

42
src/module/project/ui/list_file_detail_project.tsx
View File

@@ -5,7 +5,7 @@ import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { funDeleteFileProject, funGetOneProjectById } from '../lib/api_project';
import { useParams } from 'next/navigation';
import { useShallowEffect } from '@mantine/hooks';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { IDataFileProject } from '../lib/type_project';
import { BsFileTextFill, BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
import LayoutModal from '@/module/_global/layout/layout_modal';
@@ -24,6 +24,7 @@ export default function ListFileDetailProject() {
const [isOpenModalView, setOpenModalView] = useState(false)
const [isExtension, setExtension] = useState('')
const tema = useHookstate(TEMA)
const isMobile = useMediaQuery("(max-width: 350px)");
async function getOneData() {
try {
@@ -110,20 +111,35 @@ export default function ListFileDetailProject() {
setOpenDrawer(true)
}}
>
<Grid gutter={"sm"} justify='flex-start' align='flex-start'>
<Grid.Col span={"auto"}>
<Center >
{item.extension == "pdf" && <BsFiletypePdf size={30} />}
{item.extension == "csv" && <BsFiletypeCsv size={30} />}
{item.extension == "png" && <BsFiletypePng size={30} />}
{item.extension == "jpg" || item.extension == "jpeg" && <BsFiletypeJpg size={30} />}
{item.extension == "heic" && <BsFiletypeHeic size={30} />}
</Center>
<Grid justify='center' align='center'>
<Grid.Col span={{
base: 1.5,
xs: 1,
sm: 1,
md: 1,
lg: 1,
xl: 1,
}}>
{item.extension == "pdf" && <BsFiletypePdf size={ 30} />}
{item.extension == "csv" && <BsFiletypeCsv size={ 30} />}
{item.extension == "png" && <BsFiletypePng size={ 30} />}
{item.extension == "jpg" && <BsFiletypeJpg size={ 30} />}
{item.extension == "jpeg" && <BsFiletypeJpg size={ 30} />}
{item.extension == "heic" && <BsFiletypeHeic size={ 30} />}
</Grid.Col>
<Grid.Col span={10}>
<Grid.Col
span={{
base: 10.5,
xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}
>
<Text style={{
overflowWrap: "break-word"
}}>{item.name + '.' + item.extension}</Text>
}} pl={isMobile ? 10 : 0} truncate="end">{item.name + '.' + item.extension}</Text>
</Grid.Col>
</Grid>
<Group>
@@ -136,7 +152,7 @@ export default function ListFileDetailProject() {
<LayoutDrawer opened={openDrawer} title={<Text lineClamp={1}>{nameData}</Text>} onClose={() => setOpenDrawer(false)}>
<LayoutDrawer opened={openDrawer} title={<Text truncate="end">{nameData}</Text>} onClose={() => setOpenDrawer(false)}>
<Box>
<Stack pt={10}>
<SimpleGrid

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

@@ -191,15 +191,7 @@ export default function ListProject() {
{v.title}
</Text>
</Box>
</Box>
<RiCircleFill size={12} color={
v.status === 0 ? '#1372C4' :
v.status === 1 ? '#C5771A' :
v.status === 2 ? '#0B6025' :
v.status === 3 ? '#BB1F1F' :
""
} />
</Group>
</Grid.Col>
</Grid>

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

@@ -96,23 +96,27 @@ export default function ListTugasDetailProject() {
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 20,
// padding: 10,
}}
pl={20}
pr={20}
>
{
loading ? <>
<Box pl={5} pr={5} pt={20} pb={20}>
<SkeletonDetailListTugasTask />
</Box>
</> :
isData.length === 0 ? <Text>Tidak ada tugas</Text> :
isData.map((item, index) => {
return (
<Box key={index} mb={20}>
<Box key={index}>
<Box onClick={() => {
setIdData(item.id)
setStatusData(item.status)
setOpenDrawer(true)
}}>
<Checkbox color="teal" size="md" checked={(item.status === 1) ? true : false} disabled
}} my={18}>
<Checkbox color="teal" size="md" checked={(item.status === 1) ? true : false} disabled
label={item.status === 1 ? 'Sudah Selesai' : 'Belum Selesai'}
/>
<Box mt={20}>
@@ -134,7 +138,7 @@ export default function ListTugasDetailProject() {
</Grid>
</Box>
<Box>
<SimpleGrid cols={{ base: 1, sm: 2, lg: 2 }} mt={20}>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} my={20}>
<Box>
<Text>Tanggal Mulai</Text>
<Group
@@ -161,7 +165,7 @@ export default function ListTugasDetailProject() {
</Box>
</Box>
</Box>
<Divider my={"lg"} />
<Divider my={20}/>
</Box>
)
})
@@ -209,7 +213,7 @@ export default function ListTugasDetailProject() {
</LayoutDrawer>
<LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin menghapus Kegiatan ini?"
description="Apakah Anda yakin ingin menghapus Tahapan Tugas ini?"
onYes={(val) => {
if (val) {
onDelete()
@@ -219,11 +223,10 @@ export default function ListTugasDetailProject() {
<LayoutDrawer opened={openDrawerStatus} title={'Status'} onClose={() => setOpenDrawerStatus(false)}>
<Box>
<Stack pt={10}>
{
valStatusDetailProject.map((item, index) => {
return (
<Box mb={5} key={index} onClick={() => { onUpdateStatus(item.value) }}>
<Box key={index} onClick={() => { onUpdateStatus(item.value) }}>
<Flex justify={"space-between"} align={"center"}>
<Group>
<Text style={{
@@ -245,13 +248,11 @@ export default function ListTugasDetailProject() {
{statusData === item.value ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Flex>
<Divider my={"md"} />
<Divider my={20} />
</Box>
)
})
}
</Stack>
</Box>
</LayoutDrawer>