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

style : update style

Browse Source
This commit is contained in:
lukman
2024-09-25 15:36:17 +08:00
parent 75218f5dc3
commit fa3c715974
15 changed files with 353 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -72,8 +72,8 @@ export async function GET(request: Request, context: { params: { id: string } })
const fix = dataProgress.map((v: any) => ({ const fix = dataProgress.map((v: any) => ({
..._.omit(v, ["dateStart", "dateEnd"]), ..._.omit(v, ["dateStart", "dateEnd"]),
dateStart: moment(v.dateStart).format("DD MMMM YYYY"), dateStart: moment(v.dateStart).format("DD-MM-YYYY"),
dateEnd: moment(v.dateEnd).format("DD MMMM YYYY"), dateEnd: moment(v.dateEnd).format("DD-MM-YYYY"),
})) }))
allData = fix allData = fix

44
src/module/division_new/ui/list_discussion.tsx
View File

@@ -19,6 +19,7 @@ export default function ListDiscussionOnDetailDivision() {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const isMobile = useMediaQuery('(max-width: 399px)'); const isMobile = useMediaQuery('(max-width: 399px)');
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 438px)");
async function fetchData() { async function fetchData() {
try { try {
@@ -81,23 +82,40 @@ export default function ListDiscussionOnDetailDivision() {
return ( return (
<Box key={i} p={10}> <Box key={i} p={10}>
<Box style={{ <Box style={{
borderRadius: 10, borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`, border: `1px solid ${"#D6D8F6"}`,
padding: 10, padding: 10,
}} }}
onClick={() => router.push(`${param.id}/discussion/${v.id}`)} onClick={() => router.push(`${param.id}/discussion/${v.id}`)}
> >
<Group> <Grid align='center'>
<GoDiscussionClosed size={25} /> <Grid.Col
<Box w={{ span={{
base: isMobile ? 180 : 230, base: 1,
md: 400 xs: 1,
}}> sm: 1,
<Text fw={"bold"} truncate="end" fz={isMobile ? 14 : 16}> md: 1,
lg: 1,
xl: 1,
}}
>
<GoDiscussionClosed size={25} />
</Grid.Col>
<Grid.Col
span={{
base: 11,
xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}
>
<Text fw={"bold"} truncate="end" pl={isMobile2 ? 10 : 0} fz={isMobile ? 14 : 16}>
{v.desc} {v.desc}
</Text> </Text>
</Box> </Grid.Col>
</Group> </Grid>
<Grid align="center" mt={20}> <Grid align="center" mt={20}>
<Grid.Col span={{ <Grid.Col span={{
base: 7, base: 7,

6
src/module/task/ui/add_detail_task.tsx
View File

@@ -120,8 +120,8 @@ export default function AddDetailTask() {
borderRadius: 10, borderRadius: 10,
}, },
}} }}
label="Tahapan" label="Judul Tahapan"
placeholder="Input Nama Tahapan" placeholder="Input Judul Tahapan"
size="md" size="md"
required required
value={title} value={title}
@@ -133,7 +133,7 @@ export default function AddDetailTask() {
onBlur={() => setTouched({ ...touched, title: true })} onBlur={() => setTouched({ ...touched, title: true })}
error={ error={
touched.title && ( touched.title && (
title == "" ? "Tahapan Tidak Boleh Kosong" : null title == "" ? "Judul Tahapan Tidak Boleh Kosong" : null
) )
} }
/> />

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

@@ -1,5 +1,5 @@
"use client" "use client"
import { LayoutNavbarNew, SkeletonSingle, TEMA } from "@/module/_global"; import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from "@/module/_global";
import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new"; import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new";
import { import {
ActionIcon, ActionIcon,
@@ -19,7 +19,7 @@ import {
Text, Text,
TextInput, TextInput,
} from "@mantine/core"; } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import React, { useState } from "react"; import React, { useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
@@ -44,6 +44,7 @@ export default function AddMemberDetailTask() {
const [onClickSearch, setOnClickSearch] = useState(false) const [onClickSearch, setOnClickSearch] = useState(false)
const [searchQuery, setSearchQuery] = useState('') const [searchQuery, setSearchQuery] = useState('')
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 438px)");
async function getData() { async function getData() {
@@ -211,7 +212,7 @@ export default function AddMemberDetailTask() {
borderBottom: `1px solid ${"#E0DFDF"}` borderBottom: `1px solid ${"#E0DFDF"}`
}}> }}>
{selectedFiles.length > 0 ? ( {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) => { {selectedFiles.map((v: any, i: any) => {
return ( return (
<Carousel.Slide key={i}> <Carousel.Slide key={i}>
@@ -255,43 +256,56 @@ export default function AddMemberDetailTask() {
.fill(null) .fill(null)
.map((_, i) => ( .map((_, i) => (
<Box key={i}> <Box key={i}>
<SkeletonSingle /> <SkeletonList />
</Box> </Box>
)) ))
: :
<Box mt={15} mb={100}> (isData.length === 0) ?
{isData.map((v, i) => { <Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser); <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
const found = isDataMember.some((i: any) => i.idUser == v.idUser) </Stack>
return ( :
<Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}> <Box mt={15} mb={100}>
<Grid align='center'> {isData.map((v, i) => {
<Grid.Col span={{ const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
base: 3, const found = isDataMember.some((i: any) => i.idUser == v.idUser)
xl: 2 return (
}}> <Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" /> <Grid align='center'>
</Grid.Col> <Grid.Col span={{
<Grid.Col span={{ base: 1,
base: 9, xs: 1,
xl: 10 sm: 1,
}}> md: 1,
<Flex justify='space-between' align={"center"}> lg: 1,
<Flex direction={'column'} align="flex-start" justify="flex-start"> xl: 1,
<Text lineClamp={1}>{v.name}</Text> }}>
<Text c={"dimmed"}>{(found) ? "sudah menjadi anggota" : ""}</Text> <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,
md: 11,
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>
<Text c={"dimmed"} pl={isMobile2 ? 40 : 30}>{(found) ? "sudah menjadi anggota" : ""}</Text>
</Flex>
{isSelected ? <FaCheck /> : null}
</Flex> </Flex>
{isSelected ? <FaCheck /> : null} </Grid.Col>
</Flex> </Grid>
</Grid.Col> <Box mt={10}>
</Grid> <Divider size={"xs"} />
<Box mt={10}> </Box>
<Divider size={"xs"} />
</Box> </Box>
</Box> );
); })}
})} </Box>
</Box>
} }
</Box> </Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{ <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{

8
src/module/task/ui/create_date_end_task.tsx
View File

@@ -59,7 +59,7 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
<HiChevronLeft size={20} color='white' /> <HiChevronLeft size={20} color='white' />
</ActionIcon> </ActionIcon>
</Box> </Box>
} title={"Tanggal Tugas"} menu /> } title={"Tanggal dan Tugas"} menu />
<Box p={20}> <Box p={20}>
<Group <Group
justify="center" justify="center"
@@ -108,8 +108,8 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
borderRadius: 10, borderRadius: 10,
}, },
}} }}
placeholder="Input Nama Tahapan" placeholder="Input Judul Tahapan"
label="Judul Tugas" label="Judul Tahapan"
required required
size="md" size="md"
value={title} value={title}
@@ -118,7 +118,7 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
setTouched({ ...touched, title: false }) setTouched({ ...touched, title: false })
}} }}
onBlur={() => setTouched({ ...touched, title: true })} onBlur={() => setTouched({ ...touched, title: true })}
error={touched.title && title == "" ? "Judul Tugas Tidak Boleh Kosong" : null} error={touched.title && title == "" ? "Judul Tahapan Tidak Boleh Kosong" : null}
/> />
</Stack> </Stack>
</Box> </Box>

4
src/module/task/ui/create_task.tsx
View File

@@ -113,7 +113,7 @@ export default function CreateTask() {
borderRadius: 10, borderRadius: 10,
}, },
}} }}
placeholder="Nama Tugas" placeholder="Judul Tugas"
size="md" size="md"
label="Judul Tugas" label="Judul Tugas"
value={title} value={title}
@@ -125,7 +125,7 @@ export default function CreateTask() {
required required
error={ error={
touched.title && ( touched.title && (
title == "" ? "Nama Tidak Boleh Kosong" : null title == "" ? "Judul Tugas Tidak Boleh Kosong" : null
) )
} }
/> />

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

@@ -1,5 +1,5 @@
"use client" "use client"
import { LayoutNavbarNew, SkeletonSingle, TEMA } from "@/module/_global"; import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from "@/module/_global";
import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new"; import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new";
import { useHookstate } from "@hookstate/core"; import { useHookstate } from "@hookstate/core";
import { import {
@@ -15,10 +15,11 @@ import {
Indicator, Indicator,
rem, rem,
Skeleton, Skeleton,
Stack,
Text, Text,
TextInput, TextInput,
} from "@mantine/core"; } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import React, { useState } from "react"; import React, { useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
@@ -41,6 +42,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
const [onClickSearch, setOnClickSearch] = useState(false) const [onClickSearch, setOnClickSearch] = useState(false)
const [searchQuery, setSearchQuery] = useState('') const [searchQuery, setSearchQuery] = useState('')
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 438px)");
async function getData() { async function getData() {
@@ -192,7 +194,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
borderBottom: `1px solid ${"#E0DFDF"}` borderBottom: `1px solid ${"#E0DFDF"}`
}}> }}>
{selectedFiles.length > 0 ? ( {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) => { {selectedFiles.map((v: any, i: any) => {
return ( return (
<Carousel.Slide key={i}> <Carousel.Slide key={i}>
@@ -242,28 +244,41 @@ 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 /> <SkeletonList />
</Box> </Box>
)) ))
: :
(isData.length === 0) ?
<Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
</Stack>
:
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);
return ( return (
<Box mb={15} key={i} onClick={() => handleFileClick(i)}> <Box mb={15} key={i} onClick={() => handleFileClick(i)}>
<Grid align='center'> <Grid align='center'>
<Grid.Col span={{ <Grid.Col span={{
base: 3, base: 1,
xl: 2 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" /> <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
</Grid.Col> </Grid.Col>
<Grid.Col span={{ <Grid.Col span={{
base: 9, base: 11,
xl: 10 xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}> }}>
<Flex justify='space-between' align={"center"}> <Flex justify='space-between' align={"center"}>
<Flex direction={'column'} align="flex-start" justify="flex-start"> <Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1}>{v.name}</Text> <Text lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
</Flex> </Flex>
{isSelected ? <FaCheck /> : null} {isSelected ? <FaCheck /> : null}
</Flex> </Flex>

22
src/module/task/ui/detail_list_anggota_task.tsx
View File

@@ -26,6 +26,26 @@ export default function ListAnggotaDetailTask() {
const adminLogin = useHookstate(globalIsAdminDivision) const adminLogin = useHookstate(globalIsAdminDivision)
const isMobile = useMediaQuery('(max-width: 369px)'); const isMobile = useMediaQuery('(max-width: 369px)');
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
async function getOneDataCancel() {
try {
const res = await funGetTaskDivisionById(param.detail, 'data');
if (res.success) {
setReason(res.data.reason);
} else {
toast.error(res.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan data tugas divisi, coba lagi nanti");
}
}
useShallowEffect(() => {
getOneDataCancel();
}, [param.detail])
async function getOneData() { async function getOneData() {
try { try {
@@ -101,7 +121,9 @@ export default function ListAnggotaDetailTask() {
<Grid align='center' mt={10} <Grid align='center' mt={10}
onClick={() => { onClick={() => {
setDataChoose({ id: v.idUser, name: v.name }) setDataChoose({ id: v.idUser, name: v.name })
reason == null ?
setOpenDrawer(true) setOpenDrawer(true)
: setOpenDrawer(false)
}} }}
> >
<Grid.Col span={9}> <Grid.Col span={9}>

35
src/module/task/ui/detail_list_file_task.tsx
View File

@@ -25,6 +25,26 @@ export default function ListFileDetailTask() {
const [isOpenModalView, setOpenModalView] = useState(false) const [isOpenModalView, setOpenModalView] = useState(false)
const [isExtension, setExtension] = useState('') const [isExtension, setExtension] = useState('')
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
async function getOneDataCancel() {
try {
const res = await funGetTaskDivisionById(param.detail, 'data');
if (res.success) {
setReason(res.data.reason);
} else {
toast.error(res.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan data tugas divisi, coba lagi nanti");
}
}
useShallowEffect(() => {
getOneDataCancel();
}, [param.detail])
async function getOneData() { async function getOneData() {
try { try {
@@ -116,12 +136,13 @@ export default function ListFileDetailTask() {
{item.extension == "pdf" && <BsFiletypePdf size={25} />} {item.extension == "pdf" && <BsFiletypePdf size={25} />}
{item.extension == "csv" && <BsFiletypeCsv size={25} />} {item.extension == "csv" && <BsFiletypeCsv size={25} />}
{item.extension == "png" && <BsFiletypePng size={25} />} {item.extension == "png" && <BsFiletypePng size={25} />}
{(item.extension == "jpg" || item.extension == "jpeg") && <BsFiletypeJpg size={25} />} {item.extension == "jpg" && <BsFiletypeJpg size={25} />}
{item.extension == "jpeg" && <BsFiletypeJpg size={25} />}
{item.extension == "heic" && <BsFiletypeHeic size={25} />} {item.extension == "heic" && <BsFiletypeHeic size={25} />}
</Center> </Center>
</Grid.Col> </Grid.Col>
<Grid.Col span={10}> <Grid.Col span={10}>
<Text>{item.name + '.' + item.extension}</Text> <Text truncate={'end'}>{item.name + '.' + item.extension}</Text>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Group> <Group>
@@ -149,12 +170,16 @@ export default function ListFileDetailTask() {
</Box> </Box>
</Flex> </Flex>
<Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} > <Flex onClick={() => {
reason == null ?
setOpenModal(true)
: setOpenModal(false)
}} justify={'center'} align={'center'} direction={'column'} >
<Box> <Box>
<FaTrash size={30} color={tema.get().utama} /> <FaTrash size={30} color={reason == null ? tema.get().utama : "gray"} />
</Box> </Box>
<Box> <Box>
<Text c={tema.get().utama}>Hapus file</Text> <Text c={reason == null ? tema.get().utama : "gray"}>Hapus file</Text>
</Box> </Box>
</Flex> </Flex>
</SimpleGrid> </SimpleGrid>

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

@@ -26,6 +26,27 @@ export default function ListTugasDetailTask() {
const router = useRouter() const router = useRouter()
const refresh = useHookstate(globalRefreshTask) const refresh = useHookstate(globalRefreshTask)
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
async function getOneDataCancel() {
try {
const res = await funGetTaskDivisionById(param.detail, 'data');
if (res.success) {
setReason(res.data.reason);
} else {
toast.error(res.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan data tugas divisi, coba lagi nanti");
}
}
useShallowEffect(() => {
getOneDataCancel();
}, [param.detail])
async function getOneData() { async function getOneData() {
try { try {
setLoading(true) setLoading(true)
@@ -97,13 +118,16 @@ export default function ListTugasDetailTask() {
style={{ style={{
borderRadius: 10, borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`, border: `1px solid ${"#D6D8F6"}`,
padding: 20,
}} }}
pl={20}
pr={20}
> >
{ {
loading ? loading ?
<> <>
<SkeletonDetailListTugasTask /> <Box pl={5} pr={5} pt={20} pb={20}>
<SkeletonDetailListTugasTask />
</Box>
</> </>
: :
isData.length === 0 ? <Text>Tidak ada tugas</Text> : isData.length === 0 ? <Text>Tidak ada tugas</Text> :
@@ -113,8 +137,10 @@ export default function ListTugasDetailTask() {
<Box onClick={() => { <Box onClick={() => {
setIdData(item.id) setIdData(item.id)
setStatusData(item.status) setStatusData(item.status)
setOpenDrawer(true) reason == null ?
}}> setOpenDrawer(true)
: setOpenDrawer(false)
}} my={18}>
<Checkbox color="teal" size="md" checked={(item.status === 1) ? true : false} disabled <Checkbox color="teal" size="md" checked={(item.status === 1) ? true : false} disabled
label={item.status === 1 ? 'Sudah Selesai' : 'Belum Selesai'} label={item.status === 1 ? 'Sudah Selesai' : 'Belum Selesai'}
/> />
@@ -137,7 +163,7 @@ export default function ListTugasDetailTask() {
</Grid> </Grid>
</Box> </Box>
<Box> <Box>
<SimpleGrid cols={{ base: 1, sm: 2, lg: 2 }} mt={20}> <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} my={20}>
<Box> <Box>
<Text>Tanggal Mulai</Text> <Text>Tanggal Mulai</Text>
<Group <Group
@@ -164,7 +190,7 @@ export default function ListTugasDetailTask() {
</Box> </Box>
</Box> </Box>
</Box> </Box>
<Divider my={"lg"} /> <Divider my={20} />
</Box> </Box>
) )
}) })
@@ -179,10 +205,10 @@ export default function ListTugasDetailTask() {
style={{ style={{
alignContent: 'flex-start', alignContent: 'flex-start',
alignItems: 'flex-start', alignItems: 'flex-start',
}} }}
> >
<Flex onClick={() => { setOpenDrawerStatus(true) }} justify={'center'} align={'center'} direction={'column'} <Flex onClick={() => { setOpenDrawerStatus(true) }} justify={'center'} align={'center'} direction={'column'}
pb={20} pb={20}
> >
<Box> <Box>
<AiOutlineFileDone size={30} color={tema.get().utama} /> <AiOutlineFileDone size={30} color={tema.get().utama} />

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

@@ -1,6 +1,6 @@
'use client' 'use client'
import { TEMA } from "@/module/_global"; import { TEMA } from "@/module/_global";
import { Box, Grid, ActionIcon, Progress, Text, Skeleton } from "@mantine/core"; import { Box, Grid, ActionIcon, Progress, Text, Skeleton, Group } from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks"; import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
@@ -9,6 +9,7 @@ import { funGetTaskDivisionById } from "../lib/api_task";
import { useState } from "react"; import { useState } from "react";
import { globalRefreshTask } from "../lib/val_task"; import { globalRefreshTask } from "../lib/val_task";
import { useHookstate } from "@hookstate/core"; import { useHookstate } from "@hookstate/core";
import { IoIosWarning } from "react-icons/io";
export default function ProgressDetailTask() { export default function ProgressDetailTask() {
const [valProgress, setValProgress] = useState(0) const [valProgress, setValProgress] = useState(0)
@@ -18,6 +19,27 @@ export default function ProgressDetailTask() {
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const isMobile = useMediaQuery('(max-width: 369px)'); const isMobile = useMediaQuery('(max-width: 369px)');
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
async function getOneDataCancel() {
try {
const res = await funGetTaskDivisionById(param.detail, 'data');
if (res.success) {
setReason(res.data.reason);
} else {
toast.error(res.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan data tugas divisi, coba lagi nanti");
}
}
useShallowEffect(() => {
getOneDataCancel();
}, [param.detail])
async function getOneData() { async function getOneData() {
try { try {
@@ -56,6 +78,22 @@ export default function ProgressDetailTask() {
return ( return (
<Box mt={10}> <Box mt={10}>
{reason !== null ?
(
<Box mb={10}>
<Box p={15} bg={"#FFF2CD"} style={{
borderRadius: 10,
}}>
<Group align='center'>
<IoIosWarning size={25} />
<Text fw={"bold"}>Tugas dibatalkan</Text>
</Group>
<Text mt={5} truncate="end">{reason}</Text>
</Box>
</Box>
)
: null
}
{loading ? {loading ?
<Skeleton width={"100%"} height={100} radius={"md"} /> <Skeleton width={"100%"} height={100} radius={"md"} />
: :
@@ -74,14 +112,14 @@ export default function ProgressDetailTask() {
aria-label="Gradient action icon" aria-label="Gradient action icon"
radius={100} radius={100}
// gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }} // gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }}
bg={tema.get().bgFiturDivision} bg={tema.get().bgFiturHome}
> >
<HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={tema.get().utama} /> <HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={tema.get().utama} />
</ActionIcon> </ActionIcon>
</Grid.Col> </Grid.Col>
<Grid.Col span={9}> <Grid.Col span={9}>
<Box> <Box>
<Text fz={isMobile ? 14 : 16}>Kemajuan Kegiatan {valProgress}%</Text> <Text fz={isMobile ? 14 : 16}>Kemajuan Tugas {valProgress}%</Text>
<Progress <Progress
style={{ style={{
border: `1px solid ${"#BDBDBD"}`, border: `1px solid ${"#BDBDBD"}`,

6
src/module/task/ui/edit_detail_task.tsx
View File

@@ -89,7 +89,7 @@ export default function EditDetailTask() {
return ( return (
<Box> <Box>
<LayoutNavbarNew back="" title={"Edit Detail Tugas"} menu /> <LayoutNavbarNew back="" title={"Edit Tanggal dan Tugas"} menu />
<Box p={20}> <Box p={20}>
<Group <Group
justify="center" justify="center"
@@ -153,9 +153,9 @@ export default function EditDetailTask() {
borderRadius: 10, borderRadius: 10,
}, },
}} }}
label={"Nama Tahapan"} label={"Judul Tahapan"}
required required
placeholder="Input Nama Tahapan" placeholder="Input Judul Tahapan"
size="md" size="md"
value={title} value={title}
onChange={(e) => { setTitle(e.target.value) }} onChange={(e) => { setTitle(e.target.value) }}

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

@@ -1,4 +1,4 @@
import { currentScroll, TEMA } from "@/module/_global"; import { currentScroll, SkeletonList, TEMA } from "@/module/_global";
import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Progress, Skeleton, Text, TextInput, Title } from "@mantine/core"; import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Progress, Skeleton, Text, TextInput, Title } from "@mantine/core";
import { useParams, useRouter, useSearchParams } from "next/navigation"; import { useParams, useRouter, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@@ -117,70 +117,80 @@ export default function ListDivisionTask() {
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Box pt={20}> <Box pt={20}>
{loading ? <Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}>
<Box> <Text fw={'bold'} c={tema.get().utama}>Total Tugas</Text>
<Skeleton width={"100%"} height={100} radius={"md"} /> <Flex justify={'center'} align={'center'} h={'100%'}>
</Box> <Text fz={40} fw={'bold'} c={tema.get().utama}>{totalData}</Text>
: </Flex>
<Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}> </Box>
<Text fw={'bold'} c={tema.get().utama}>Total Kegiatan</Text>
<Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={tema.get().utama}>{totalData}</Text>
</Flex>
</Box>
}
{isList ? ( {isList ? (
<Box pt={20}> <Box pt={20}>
{isData.map((v, i) => { {
return ( loading ?
<Box key={i}> Array(3)
<Grid align='center'> .fill(null)
<Grid.Col span={{ .map((_, i) => (
base: 1, <Box key={i}>
xs: 1, <SkeletonList />
sm: 1, </Box>
md: 1, ))
lg: 1, :
xl: 1 _.isEmpty(isData)
}}> ?
<Group onClick={() => router.push(`task/${v.id}`)}> <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
<Center> <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Tugas</Text>
<ActionIcon </Box>
variant="gradient" :
size={50} isData.map((v, i) => {
aria-label="Gradient action icon" return (
radius={100} <Box key={i}>
bg={tema.get().bgFiturDivision} <Grid align='center'>
> <Grid.Col span={{
<HiMiniPresentationChartBar size={25} color={tema.get().utama} /> base: 1,
</ActionIcon> xs: 1,
</Center> sm: 1,
</Group> md: 1,
</Grid.Col> lg: 1,
<Grid.Col span={{ xl: 1
base: 11, }}>
xs: 11, <Group onClick={() => router.push(`task/${v.id}`)}>
sm: 11, <Center>
md: 11, <ActionIcon
lg: 11, variant="gradient"
xl: 11, size={50}
}}> aria-label="Gradient action icon"
<Box> radius={100}
<Box w={{ bg={tema.get().bgFiturDivision}
base: 280, >
xl: 430 <HiMiniPresentationChartBar size={25} color={tema.get().utama} />
}}> </ActionIcon>
<Text truncate="end" pl={paddingLift ? 30 : 20}> </Center>
{v.title} </Group>
</Text> </Grid.Col>
</Box> <Grid.Col span={{
base: 11,
xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}>
<Box>
<Box w={{
base: 280,
xl: 430
}}>
<Text truncate="end" pl={paddingLift ? 30 : 20}>
{v.title}
</Text>
</Box>
</Box>
</Grid.Col>
</Grid>
<Divider my="sm" />
</Box> </Box>
</Grid.Col> );
</Grid> })}
<Divider my="sm" />
</Box>
);
})}
</Box> </Box>
) : ( ) : (
<Box pt={20}> <Box pt={20}>

51
src/module/task/ui/navbar_detail_division_task.tsx
View File

@@ -21,12 +21,14 @@ export default function NavbarDetailDivisionTask() {
const roleLogin = useHookstate(globalRole) const roleLogin = useHookstate(globalRole)
const adminLogin = useHookstate(globalIsAdminDivision) const adminLogin = useHookstate(globalIsAdminDivision)
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
async function getOneData() { async function getOneData() {
try { try {
const res = await funGetTaskDivisionById(param.detail, 'data'); const res = await funGetTaskDivisionById(param.detail, 'data');
if (res.success) { if (res.success) {
setName(res.data.title); setName(res.data.title);
setReason(res.data.reason);
} else { } else {
toast.error(res.message); toast.error(res.message);
} }
@@ -41,7 +43,6 @@ export default function NavbarDetailDivisionTask() {
getOneData(); getOneData();
}, [param.detail]) }, [param.detail])
return ( return (
<> <>
<LayoutNavbarNew back={`/division/${param.id}/task/`} title={name} menu={ <LayoutNavbarNew back={`/division/${param.id}/task/`} title={name} menu={
@@ -66,22 +67,24 @@ export default function NavbarDetailDivisionTask() {
style={{ style={{
alignContent: 'flex-start', alignContent: 'flex-start',
alignItems: 'flex-start', alignItems: 'flex-start',
}} }}
> >
<Flex justify={'center'} align={'center'} direction={'column'} <Flex justify={'center'} align={'center'} direction={'column'}
style={{ style={{
cursor: 'pointer' cursor: 'pointer'
}} }}
onClick={() => { onClick={() => {
router.push(param.detail + '/add-task') reason == null ?
router.push(param.detail + '/add-task')
: null
}} }}
pb={20} pb={20}
> >
<Box> <Box>
<IoAddCircle size={30} color={tema.get().utama} /> <IoAddCircle size={30} color={reason == null ? tema.get().utama : "gray"} />
</Box> </Box>
<Box> <Box>
<Text c={tema.get().utama} ta='center'>Tambah Tugas</Text> <Text c={reason == null ? tema.get().utama : "gray"} ta='center'>Tambah Tugas</Text>
</Box> </Box>
</Flex> </Flex>
@@ -90,14 +93,16 @@ export default function NavbarDetailDivisionTask() {
cursor: 'pointer' cursor: 'pointer'
}} }}
onClick={() => { onClick={() => {
router.push(param.detail + '/add-file') reason == null ?
router.push(param.detail + '/add-file')
: null
}} }}
> >
<Box> <Box>
<FaFileCirclePlus size={30} color={tema.get().utama} /> <FaFileCirclePlus size={30} color={reason == null ? tema.get().utama : "gray"} />
</Box> </Box>
<Box> <Box>
<Text c={tema.get().utama} ta='center'>Tambah file</Text> <Text c={reason == null ? tema.get().utama : "gray"} ta='center'>Tambah file</Text>
</Box> </Box>
</Flex> </Flex>
@@ -108,12 +113,16 @@ export default function NavbarDetailDivisionTask() {
style={{ style={{
cursor: 'pointer' cursor: 'pointer'
}} }}
onClick={() => { router.push(param.detail + '/add-member') }} > onClick={() => {
reason == null ?
router.push(param.detail + '/add-member')
: null
}} >
<Box> <Box>
<FaUsers size={30} color={tema.get().utama} /> <FaUsers size={30} color={reason == null ? tema.get().utama : "gray"} />
</Box> </Box>
<Box> <Box>
<Text c={tema.get().utama} ta='center'>Tambah anggota</Text> <Text c={reason == null ? tema.get().utama : "gray"} ta='center'>Tambah anggota</Text>
</Box> </Box>
</Flex> </Flex>
@@ -121,12 +130,16 @@ export default function NavbarDetailDivisionTask() {
style={{ style={{
cursor: 'pointer' cursor: 'pointer'
}} }}
onClick={() => { router.push(param.detail + '/edit') }} > onClick={() => {
reason == null ?
router.push(param.detail + '/edit')
: null
}} >
<Box> <Box>
<FaPencil size={30} color={tema.get().utama} /> <FaPencil size={30} color={reason == null ? tema.get().utama : "gray"} />
</Box> </Box>
<Box> <Box>
<Text c={tema.get().utama} ta='center'>Edit</Text> <Text c={reason == null ? tema.get().utama : "gray"} ta='center'>Edit</Text>
</Box> </Box>
</Flex> </Flex>
@@ -134,12 +147,16 @@ export default function NavbarDetailDivisionTask() {
style={{ style={{
cursor: 'pointer' cursor: 'pointer'
}} }}
onClick={() => { router.push(param.detail + '/cancel') }} > onClick={() => {
reason == null ?
router.push(param.detail + '/cancel')
: null
}} >
<Box> <Box>
<MdCancel size={30} color={tema.get().utama} /> <MdCancel size={30} color={reason == null ? tema.get().utama : "gray"} />
</Box> </Box>
<Box> <Box>
<Text c={tema.get().utama} ta='center'>Batal</Text> <Text c={reason == null ? tema.get().utama : "gray"} ta='center'>Batal</Text>
</Box> </Box>
</Flex> </Flex>
</> : <></> </> : <></>

2
src/module/task/ui/navbar_division_task.tsx
View File

@@ -17,7 +17,7 @@ export default function NavbarDivisionTask() {
return ( return (
<> <>
<LayoutNavbarNew back={`/division/${param.id}`} title="Divisi - Tugas" <LayoutNavbarNew back={`/division/${param.id}`} title="Tugas Divisi"
menu={((roleLogin.get() != "user" && roleLogin.get() != "coadmin") || adminLogin.get()) ? menu={((roleLogin.get() != "user" && roleLogin.get() != "coadmin") || adminLogin.get()) ?
<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings"> <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' /> <HiMenu size={20} color='white' />