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

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

@@ -120,8 +120,8 @@ export default function AddDetailTask() {
borderRadius: 10,
},
}}
label="Tahapan"
placeholder="Input Nama Tahapan"
label="Judul Tahapan"
placeholder="Input Judul Tahapan"
size="md"
required
value={title}
@@ -133,7 +133,7 @@ export default function AddDetailTask() {
onBlur={() => setTouched({ ...touched, title: true })}
error={
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"
import { LayoutNavbarNew, SkeletonSingle, TEMA } from "@/module/_global";
import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from "@/module/_global";
import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new";
import {
ActionIcon,
@@ -19,7 +19,7 @@ import {
Text,
TextInput,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation";
import React, { useState } from "react";
import toast from "react-hot-toast";
@@ -44,6 +44,7 @@ export default function AddMemberDetailTask() {
const [onClickSearch, setOnClickSearch] = useState(false)
const [searchQuery, setSearchQuery] = useState('')
const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 438px)");
async function getData() {
@@ -211,7 +212,7 @@ export default function AddMemberDetailTask() {
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}>
@@ -255,43 +256,56 @@ export default function AddMemberDetailTask() {
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonSingle />
<SkeletonList />
</Box>
))
:
<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)
return (
<Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}>
<Grid align='center'>
<Grid.Col span={{
base: 3,
xl: 2
}}>
<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
}}>
<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>
(isData.length === 0) ?
<Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
</Stack>
:
<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)
return (
<Box mb={15} key={i} onClick={() => (!found) ? handleFileClick(i) : null}>
<Grid align='center'>
<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: 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>
{isSelected ? <FaCheck /> : null}
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box>
</Box>
);
})}
</Box>
);
})}
</Box>
}
</Box>
<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' />
</ActionIcon>
</Box>
} title={"Tanggal Tugas"} menu />
} title={"Tanggal dan Tugas"} menu />
<Box p={20}>
<Group
justify="center"
@@ -108,8 +108,8 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
borderRadius: 10,
},
}}
placeholder="Input Nama Tahapan"
label="Judul Tugas"
placeholder="Input Judul Tahapan"
label="Judul Tahapan"
required
size="md"
value={title}
@@ -118,7 +118,7 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
setTouched({ ...touched, title: false })
}}
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>
</Box>

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

@@ -113,7 +113,7 @@ export default function CreateTask() {
borderRadius: 10,
},
}}
placeholder="Nama Tugas"
placeholder="Judul Tugas"
size="md"
label="Judul Tugas"
value={title}
@@ -125,7 +125,7 @@ export default function CreateTask() {
required
error={
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"
import { LayoutNavbarNew, SkeletonSingle, TEMA } from "@/module/_global";
import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from "@/module/_global";
import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new";
import { useHookstate } from "@hookstate/core";
import {
@@ -15,10 +15,11 @@ import {
Indicator,
rem,
Skeleton,
Stack,
Text,
TextInput,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation";
import React, { useState } from "react";
import toast from "react-hot-toast";
@@ -41,6 +42,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
const [onClickSearch, setOnClickSearch] = useState(false)
const [searchQuery, setSearchQuery] = useState('')
const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 438px)");
async function getData() {
@@ -192,7 +194,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
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}>
@@ -242,28 +244,41 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
.fill(null)
.map((_, i) => (
<Box key={i} mb={15}>
<SkeletonSingle />
<SkeletonList />
</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) => {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
return (
<Box mb={15} key={i} onClick={() => handleFileClick(i)}>
<Grid align='center'>
<Grid.Col span={{
base: 3,
xl: 2
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
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 lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
</Flex>
{isSelected ? <FaCheck /> : null}
</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 isMobile = useMediaQuery('(max-width: 369px)');
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() {
try {
@@ -101,7 +121,9 @@ export default function ListAnggotaDetailTask() {
<Grid align='center' mt={10}
onClick={() => {
setDataChoose({ id: v.idUser, name: v.name })
reason == null ?
setOpenDrawer(true)
: setOpenDrawer(false)
}}
>
<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 [isExtension, setExtension] = useState('')
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() {
try {
@@ -116,12 +136,13 @@ export default function ListFileDetailTask() {
{item.extension == "pdf" && <BsFiletypePdf size={25} />}
{item.extension == "csv" && <BsFiletypeCsv 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} />}
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Text>{item.name + '.' + item.extension}</Text>
<Text truncate={'end'}>{item.name + '.' + item.extension}</Text>
</Grid.Col>
</Grid>
<Group>
@@ -149,12 +170,16 @@ export default function ListFileDetailTask() {
</Box>
</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>
<FaTrash size={30} color={tema.get().utama} />
<FaTrash size={30} color={reason == null ? tema.get().utama : "gray"} />
</Box>
<Box>
<Text c={tema.get().utama}>Hapus file</Text>
<Text c={reason == null ? tema.get().utama : "gray"}>Hapus file</Text>
</Box>
</Flex>
</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 refresh = useHookstate(globalRefreshTask)
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() {
try {
setLoading(true)
@@ -97,13 +118,16 @@ export default function ListTugasDetailTask() {
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 20,
}}
pl={20}
pr={20}
>
{
loading ?
<>
<SkeletonDetailListTugasTask />
<Box pl={5} pr={5} pt={20} pb={20}>
<SkeletonDetailListTugasTask />
</Box>
</>
:
isData.length === 0 ? <Text>Tidak ada tugas</Text> :
@@ -113,8 +137,10 @@ export default function ListTugasDetailTask() {
<Box onClick={() => {
setIdData(item.id)
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
label={item.status === 1 ? 'Sudah Selesai' : 'Belum Selesai'}
/>
@@ -137,7 +163,7 @@ export default function ListTugasDetailTask() {
</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
@@ -164,7 +190,7 @@ export default function ListTugasDetailTask() {
</Box>
</Box>
</Box>
<Divider my={"lg"} />
<Divider my={20} />
</Box>
)
})
@@ -179,10 +205,10 @@ export default function ListTugasDetailTask() {
style={{
alignContent: 'flex-start',
alignItems: 'flex-start',
}}
}}
>
<Flex onClick={() => { setOpenDrawerStatus(true) }} justify={'center'} align={'center'} direction={'column'}
pb={20}
pb={20}
>
<Box>
<AiOutlineFileDone size={30} color={tema.get().utama} />

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

@@ -1,6 +1,6 @@
'use client'
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 { useParams } from "next/navigation";
import toast from "react-hot-toast";
@@ -9,6 +9,7 @@ import { funGetTaskDivisionById } from "../lib/api_task";
import { useState } from "react";
import { globalRefreshTask } from "../lib/val_task";
import { useHookstate } from "@hookstate/core";
import { IoIosWarning } from "react-icons/io";
export default function ProgressDetailTask() {
const [valProgress, setValProgress] = useState(0)
@@ -16,8 +17,29 @@ export default function ProgressDetailTask() {
const param = useParams<{ id: string, detail: string }>()
const refresh = useHookstate(globalRefreshTask)
const [loading, setLoading] = useState(true)
const isMobile = useMediaQuery('(max-width: 369px)');
const isMobile = useMediaQuery('(max-width: 369px)');
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() {
try {
@@ -56,6 +78,22 @@ export default function ProgressDetailTask() {
return (
<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 ?
<Skeleton width={"100%"} height={100} radius={"md"} />
:
@@ -74,14 +112,14 @@ export default function ProgressDetailTask() {
aria-label="Gradient action icon"
radius={100}
// gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }}
bg={tema.get().bgFiturDivision}
bg={tema.get().bgFiturHome}
>
<HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={tema.get().utama} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={9}>
<Box>
<Text fz={isMobile ? 14 : 16}>Kemajuan Kegiatan {valProgress}%</Text>
<Text fz={isMobile ? 14 : 16}>Kemajuan Tugas {valProgress}%</Text>
<Progress
style={{
border: `1px solid ${"#BDBDBD"}`,

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

@@ -89,7 +89,7 @@ export default function EditDetailTask() {
return (
<Box>
<LayoutNavbarNew back="" title={"Edit Detail Tugas"} menu />
<LayoutNavbarNew back="" title={"Edit Tanggal dan Tugas"} menu />
<Box p={20}>
<Group
justify="center"
@@ -153,9 +153,9 @@ export default function EditDetailTask() {
borderRadius: 10,
},
}}
label={"Nama Tahapan"}
label={"Judul Tahapan"}
required
placeholder="Input Nama Tahapan"
placeholder="Input Judul Tahapan"
size="md"
value={title}
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 { useParams, useRouter, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
@@ -117,70 +117,80 @@ export default function ListDivisionTask() {
</Grid.Col>
</Grid>
<Box pt={20}>
{loading ?
<Box>
<Skeleton width={"100%"} height={100} radius={"md"} />
</Box>
:
<Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}>
<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>
}
<Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={tema.get().utama}>Total Tugas</Text>
<Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={tema.get().utama}>{totalData}</Text>
</Flex>
</Box>
{isList ? (
<Box pt={20}>
{isData.map((v, i) => {
return (
<Box key={i}>
<Grid align='center'>
<Grid.Col span={{
base: 1,
xs: 1,
sm: 1,
md: 1,
lg: 1,
xl: 1
}}>
<Group onClick={() => router.push(`task/${v.id}`)}>
<Center>
<ActionIcon
variant="gradient"
size={50}
aria-label="Gradient action icon"
radius={100}
bg={tema.get().bgFiturDivision}
>
<HiMiniPresentationChartBar size={25} color={tema.get().utama} />
</ActionIcon>
</Center>
</Group>
</Grid.Col>
<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>
{
loading ?
Array(3)
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonList />
</Box>
))
:
_.isEmpty(isData)
?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Tugas</Text>
</Box>
:
isData.map((v, i) => {
return (
<Box key={i}>
<Grid align='center'>
<Grid.Col span={{
base: 1,
xs: 1,
sm: 1,
md: 1,
lg: 1,
xl: 1
}}>
<Group onClick={() => router.push(`task/${v.id}`)}>
<Center>
<ActionIcon
variant="gradient"
size={50}
aria-label="Gradient action icon"
radius={100}
bg={tema.get().bgFiturDivision}
>
<HiMiniPresentationChartBar size={25} color={tema.get().utama} />
</ActionIcon>
</Center>
</Group>
</Grid.Col>
<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>
</Grid.Col>
</Grid>
<Divider my="sm" />
</Box>
);
})}
);
})}
</Box>
) : (
<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 adminLogin = useHookstate(globalIsAdminDivision)
const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
async function getOneData() {
try {
const res = await funGetTaskDivisionById(param.detail, 'data');
if (res.success) {
setName(res.data.title);
setReason(res.data.reason);
} else {
toast.error(res.message);
}
@@ -41,7 +43,6 @@ export default function NavbarDetailDivisionTask() {
getOneData();
}, [param.detail])
return (
<>
<LayoutNavbarNew back={`/division/${param.id}/task/`} title={name} menu={
@@ -66,22 +67,24 @@ export default function NavbarDetailDivisionTask() {
style={{
alignContent: 'flex-start',
alignItems: 'flex-start',
}}
}}
>
<Flex justify={'center'} align={'center'} direction={'column'}
style={{
cursor: 'pointer'
}}
onClick={() => {
router.push(param.detail + '/add-task')
reason == null ?
router.push(param.detail + '/add-task')
: null
}}
pb={20}
>
<Box>
<IoAddCircle size={30} color={tema.get().utama} />
<IoAddCircle size={30} color={reason == null ? tema.get().utama : "gray"} />
</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>
</Flex>
@@ -90,14 +93,16 @@ export default function NavbarDetailDivisionTask() {
cursor: 'pointer'
}}
onClick={() => {
router.push(param.detail + '/add-file')
reason == null ?
router.push(param.detail + '/add-file')
: null
}}
>
<Box>
<FaFileCirclePlus size={30} color={tema.get().utama} />
<FaFileCirclePlus size={30} color={reason == null ? tema.get().utama : "gray"} />
</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>
</Flex>
@@ -108,12 +113,16 @@ export default function NavbarDetailDivisionTask() {
style={{
cursor: 'pointer'
}}
onClick={() => { router.push(param.detail + '/add-member') }} >
onClick={() => {
reason == null ?
router.push(param.detail + '/add-member')
: null
}} >
<Box>
<FaUsers size={30} color={tema.get().utama} />
<FaUsers size={30} color={reason == null ? tema.get().utama : "gray"} />
</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>
</Flex>
@@ -121,12 +130,16 @@ export default function NavbarDetailDivisionTask() {
style={{
cursor: 'pointer'
}}
onClick={() => { router.push(param.detail + '/edit') }} >
onClick={() => {
reason == null ?
router.push(param.detail + '/edit')
: null
}} >
<Box>
<FaPencil size={30} color={tema.get().utama} />
<FaPencil size={30} color={reason == null ? tema.get().utama : "gray"} />
</Box>
<Box>
<Text c={tema.get().utama} ta='center'>Edit</Text>
<Text c={reason == null ? tema.get().utama : "gray"} ta='center'>Edit</Text>
</Box>
</Flex>
@@ -134,12 +147,16 @@ export default function NavbarDetailDivisionTask() {
style={{
cursor: 'pointer'
}}
onClick={() => { router.push(param.detail + '/cancel') }} >
onClick={() => {
reason == null ?
router.push(param.detail + '/cancel')
: null
}} >
<Box>
<MdCancel size={30} color={tema.get().utama} />
<MdCancel size={30} color={reason == null ? tema.get().utama : "gray"} />
</Box>
<Box>
<Text c={tema.get().utama} ta='center'>Batal</Text>
<Text c={reason == null ? tema.get().utama : "gray"} ta='center'>Batal</Text>
</Box>
</Flex>
</> : <></>

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

@@ -17,7 +17,7 @@ export default function NavbarDivisionTask() {
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()) ?
<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />