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

Merge pull request #184 from bipproduction/lukman/3-september-2024

Browse Source 
style : update responsive
This commit is contained in:
Amalia
2024-09-03 16:36:06 +08:00
committed by GitHub
parent e816f5d106 70d486d469
commit 596b3cf151
7 changed files with 205 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/api/task/[id]/route.ts
View File

@@ -2,8 +2,10 @@ import { prisma } from "@/module/_global";
import { funGetUserByCookies } from "@/module/auth"; import { funGetUserByCookies } from "@/module/auth";
import _ from "lodash"; import _ from "lodash";
import moment from "moment"; import moment from "moment";
import "moment/locale/id"
import { NextResponse } from "next/server"; import { NextResponse } from "next/server";
// GET DETAIL TASK DIVISI / GET ONE // GET DETAIL TASK DIVISI / GET ONE
export async function GET(request: Request, context: { params: { id: string } }) { export async function GET(request: Request, context: { params: { id: string } }) {
try { try {

2
src/module/division_new/ui/create_anggota_division.tsx
View File

@@ -82,7 +82,7 @@ export default function CreateAnggotaDivision() {
return ( return (
<Box> <Box>
<LayoutNavbarNew back="" title="tambah anggota" <LayoutNavbarNew back={`/division/info/${param.id}`} title="tambah anggota"
menu menu
/> />
<Box p={20}> <Box p={20}>

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

@@ -9,6 +9,7 @@ import {
Checkbox, Checkbox,
Divider, Divider,
Flex, Flex,
Grid,
Group, Group,
rem, rem,
Stack, Stack,
@@ -148,32 +149,29 @@ export default function AddMemberDetailTask() {
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"}> <Grid align='center'>
<Group> <Grid.Col span={{
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" /> base: 3,
<Stack align="flex-start" justify="flex-start"> xl: 2
<Text style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}> }}>
{v.name} <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
</Text> </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> <Text c={"dimmed"}>{(found) ? "sudah menjadi anggota" : ""}</Text>
</Stack>
</Group>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Flex> </Flex>
<Divider my={"md"} /> {isSelected ? <FaCheck /> : null}
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box> </Box>
); );
})} })}

46
src/module/task/ui/create_users_project.tsx
View File

@@ -9,6 +9,7 @@ import {
Button, Button,
Divider, Divider,
Flex, Flex,
Grid,
Group, Group,
rem, rem,
Skeleton, Skeleton,
@@ -111,7 +112,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
<Text c={WARNA.biruTua} fw={"bold"}> <Text c={WARNA.biruTua} fw={"bold"}>
Pilih Semua Anggota Pilih Semua Anggota
</Text> </Text>
<BsListCheck size={25} style={{ marginRight: 5 }} color={WARNA.biruTua}/> <BsListCheck size={25} style={{ marginRight: 5 }} color={WARNA.biruTua} />
</Group> </Group>
} }
<Box mt={15} mb={100}> <Box mt={15} mb={100}>
@@ -120,7 +121,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
.fill(null) .fill(null)
.map((_, i) => ( .map((_, i) => (
<Box key={i} mb={15}> <Box key={i} mb={15}>
<SkeletonSingle/> <SkeletonSingle />
</Box> </Box>
)) ))
: :
@@ -128,29 +129,28 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser); const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
return ( return (
<Box mb={15} key={i} onClick={() => handleFileClick(i)}> <Box mb={15} key={i} onClick={() => handleFileClick(i)}>
<Flex justify={"space-between"} align={"center"}> <Grid align='center'>
<Group> <Grid.Col span={{
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" /> base: 3,
<Text style={{ xl: 2
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}> }}>
{v.name} <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
</Text> </Grid.Col>
</Group> <Grid.Col span={{
<Text base: 9,
style={{ xl: 10
cursor: 'pointer', }}>
display: 'flex', <Flex justify='space-between' align={"center"}>
alignItems: 'center', <Flex direction={'column'} align="flex-start" justify="flex-start">
paddingLeft: 20, <Text lineClamp={1}>{v.name}</Text>
}}
>
{isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Flex> </Flex>
<Divider my={"md"} /> {isSelected ? <FaCheck /> : null}
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box> </Box>
); );
}) })

37
src/module/task/ui/detail_list_anggota_task.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 { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack } from "@mantine/core"; import { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack, Grid } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
@@ -91,31 +91,34 @@ export default function ListAnggotaDetailTask() {
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>
@@ -123,11 +126,11 @@ export default function ListAnggotaDetailTask() {
</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>

47
src/module/task/ui/detail_list_tugas_task.tsx
View File

@@ -12,6 +12,7 @@ import { FaCheck, FaPencil, FaTrash } from "react-icons/fa6"
import LayoutModal from "@/module/_global/layout/layout_modal" import LayoutModal from "@/module/_global/layout/layout_modal"
import { globalRefreshTask, valStatusDetailTask } from "../lib/val_task" import { globalRefreshTask, valStatusDetailTask } from "../lib/val_task"
import { useHookstate } from "@hookstate/core" import { useHookstate } from "@hookstate/core"
import "moment/locale/id"
export default function ListTugasDetailTask() { export default function ListTugasDetailTask() {
const [openDrawer, setOpenDrawer] = useState(false) const [openDrawer, setOpenDrawer] = useState(false)
@@ -108,27 +109,22 @@ export default function ListTugasDetailTask() {
isData.map((item, index) => { isData.map((item, index) => {
return ( return (
<Box key={index}> <Box key={index}>
<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} />
@@ -140,43 +136,34 @@ export default function ListTugasDetailTask() {
</Grid> </Grid>
</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 c={WARNA.biruTua}>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>
) )
}) })

31
src/module/task/ui/list_division_task.tsx
View File

@@ -97,8 +97,12 @@ export default function ListDivisionTask() {
{isData.map((v, i) => { {isData.map((v, i) => {
return ( return (
<Box key={i}> <Box key={i}>
<Group justify="space-between" mb={10} onClick={() => router.push(`task/${v.id}`)}> <Grid align='center'>
<Group> <Grid.Col span={{
base: 2,
xl: 1
}}>
<Group onClick={() => router.push(`task/${v.id}`)}>
<Center> <Center>
<ActionIcon <ActionIcon
variant="gradient" variant="gradient"
@@ -114,9 +118,24 @@ export default function ListDivisionTask() {
<HiMiniPresentationChartBar size={25} color={WARNA.biruTua} /> <HiMiniPresentationChartBar size={25} color={WARNA.biruTua} />
</ActionIcon> </ActionIcon>
</Center> </Center>
<Text>{v.title}</Text>
</Group>
</Group> </Group>
</Grid.Col>
<Grid.Col span={{
base: 10,
xl: 11
}}>
<Box>
<Box w={{
base: 280,
xl: 430
}}>
<Text truncate="end" pl={20}>
{v.title}
</Text>
</Box>
</Box>
</Grid.Col>
</Grid>
<Divider my="sm" /> <Divider my="sm" />
</Box> </Box>
); );
@@ -145,8 +164,8 @@ export default function ListDivisionTask() {
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`task/${v.id}`)}> <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`task/${v.id}`)}>
<Card.Section> <Card.Section>
<Box h={120} bg={WARNA.biruTua}> <Box h={120} bg={WARNA.biruTua}>
<Flex justify={'center'} align={'center'} h={"100%"}> <Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
<Title order={3} c={"white"} lineClamp={1}>{v.title}</Title> <Title order={3} c={"white"} ta={"center"} lineClamp={2}>{v.title}</Title>
</Flex> </Flex>
</Box> </Box>
</Card.Section> </Card.Section>