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

feat : update validation and color

Browse Source
This commit is contained in:
lukman
2024-08-27 13:34:12 +08:00
parent 787e58b7eb
commit a1f4df02af
44 changed files with 503 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

238
src/module/project/ui/add_detail_task_project.tsx
View File

@@ -3,131 +3,145 @@ import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { funCreateDetailProject } from '../lib/api_project';
import { Box, Button, Group, Input, SimpleGrid, Stack, Text } from '@mantine/core';
import { Box, Button, Group, Input, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { DatePicker } from '@mantine/dates';
import moment from 'moment';
import LayoutModal from '@/module/_global/layout/layout_modal';
export default function AddDetailTaskProject() {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
const router = useRouter()
const [name, setName] = useState("")
const [openModal, setOpenModal] = useState(false)
const param = useParams<{ id: string }>()
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
const router = useRouter()
const [name, setName] = useState("")
const [openModal, setOpenModal] = useState(false)
const param = useParams<{ id: string }>()
const [touched, setTouched] = useState({
name: false,
});
function onVerification() {
if (value[0] == null || value[1] == null)
return toast.error("Error! harus memilih tanggal")
function onVerification() {
if (value[0] == null || value[1] == null)
return toast.error("Error! harus memilih tanggal")
if (name == "")
return toast.error("Error! harus memasukkan judul tugas")
if (name == "")
return toast.error("Error! harus memasukkan judul tugas")
setOpenModal(true)
}
async function onSubmit() {
try {
const res = await funCreateDetailProject(param.id, {
name,
dateStart: (value[0] != null) ? value[0] : new Date,
dateEnd: (value[1] != null) ? value[1] : new Date,
})
setOpenModal(true)
}
if (res.success) {
toast.success(res.message)
setOpenModal(false)
router.push(`/project/${param.id}`)
} else {
toast.error(res.message)
async function onSubmit() {
try {
const res = await funCreateDetailProject(param.id, {
name,
dateStart: (value[0] != null) ? value[0] : new Date,
dateEnd: (value[1] != null) ? value[1] : new Date,
})
if (res.success) {
toast.success(res.message)
setOpenModal(false)
router.push(`/project/${param.id}`)
} else {
toast.error(res.message)
}
} catch (error) {
console.log(error)
toast.error("Gagal menambahkan tugas, coba lagi nanti")
}
} catch (error) {
console.log(error)
toast.error("Gagal menambahkan tugas, coba lagi nanti")
}
}
}
return (
<Box>
<LayoutNavbarNew back="" title={"Tambah Proyek"} menu />
<Box p={20}>
<Group
justify="center"
bg={"white"}
py={20}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<DatePicker
styles={{}}
type="range"
value={value}
onChange={setValue}
size="md"
c={WARNA.biruTua}
/>
</Group>
<SimpleGrid cols={{ base: 2, 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"}` }}
>
<Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
</Group>
</Box>
<Box>
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
<Group
justify="center"
bg={"white"}
h={45}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
</Group>
</Box>
</SimpleGrid>
<Stack pt={15}>
<Input
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
placeholder="Input Nama Tahapan"
size="md"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</Stack>
<Box mt={"xl"}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { onVerification() }}
>
Simpan
</Button>
</Box>
</Box>
return (
<Box>
<LayoutNavbarNew back="" title={"Tambah Kegiatan"} menu />
<Box p={20}>
<Group
justify="center"
bg={"white"}
py={20}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<DatePicker
styles={{}}
type="range"
value={value}
onChange={setValue}
size="md"
c={WARNA.biruTua}
/>
</Group>
<SimpleGrid cols={{ base: 2, 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"}` }}
>
<Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
</Group>
</Box>
<Box>
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
<Group
justify="center"
bg={"white"}
h={45}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
</Group>
</Box>
</SimpleGrid>
<Stack pt={15}>
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
placeholder="Input Nama Tahapan"
label="Judul Tahapan"
required
size="md"
value={name}
onChange={(e) => {
setName(e.target.value)
setTouched({ ...touched, name: false })
}}
onBlur={() => setTouched({ ...touched, name: true })}
error={
touched.name && (
name == "" ? "Judul Tidak Boleh Kosong" : null
)
}
/>
</Stack>
<Box mt={"xl"}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { onVerification() }}
>
Simpan
</Button>
</Box>
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin menambahkan tugas?"
onYes={(val) => {
if (val) {
onSubmit()
}
setOpenModal(false)
}} />
</Box>
);
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin menambahkan tugas?"
onYes={(val) => {
if (val) {
onSubmit()
}
setOpenModal(false)
}} />
</Box>
);
}

28
src/module/project/ui/cancel_project.tsx
View File

@@ -12,10 +12,13 @@ export default function CancelProject() {
const [alasan, setAlasan] = useState("")
const [openModal, setOpenModal] = useState(false)
const param = useParams<{ id: string }>()
const [touched, setTouched] = useState({
reason: false,
});
function onVerification() {
if (alasan == "")
return toast.error("Error! harus memasukkan alasan pembatalan proyek")
return toast.error("Error! harus memasukkan alasan pembatalan Kegiatan")
setOpenModal(true)
}
@@ -31,13 +34,13 @@ export default function CancelProject() {
}
} catch (error) {
console.log(error)
toast.error("Gagal membatalkan proyek, coba lagi nanti")
toast.error("Gagal membatalkan Kegiatan, coba lagi nanti")
}
}
return (
<Box>
<LayoutNavbarNew back="" title={"Pembatalan Proyek"} menu />
<Box pos={"relative"} h={"100vh"}>
<LayoutNavbarNew back="" title={"Pembatalan Kegiatan"} menu />
<Box p={20}>
<Stack pt={15}>
<Textarea styles={{
@@ -47,11 +50,20 @@ export default function CancelProject() {
},
}}
value={alasan}
size="md" placeholder='Contoh : proyek tidak sesuai' label="Alasan Pembatalan"
onChange={(event) => setAlasan(event.target.value)}
size="md" placeholder='Contoh : Kegiatan tidak sesuai' label="Alasan Pembatalan"
onChange={(event) => {
setAlasan(event.target.value)
setTouched({ ...touched, reason: false })
}}
error={
touched.reason && (
alasan == "" ? "Alasan Tidak Boleh Kosong" : null
)
}
onBlur={() => setTouched({ ...touched, reason: true })}
/>
</Stack>
<Box mt={"xl"}>
<Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
<Button
c={"white"}
bg={WARNA.biruTua}
@@ -67,7 +79,7 @@ export default function CancelProject() {
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin membatalkan proyek ini? Pembatalan proyek bersifat permanen"
description="Apakah Anda yakin ingin membatalkan Kegiatan ini? Pembatalan Kegiatan bersifat permanen"
onYes={(val) => {
if (val) {
onSubmit()

19
src/module/project/ui/create_date_end_task.tsx
View File

@@ -10,6 +10,7 @@ import {
SimpleGrid,
Stack,
Text,
TextInput,
} from "@mantine/core";
import React, { useState } from "react";
import { DatePicker } from "@mantine/dates";
@@ -23,6 +24,9 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateP
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
const router = useRouter()
const [title, setTitle] = useState("")
const [touched, setTouched] = useState({
title: false
});
function onSubmit() {
if (value[0] == null || value[1] == null)
@@ -85,7 +89,7 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateP
</Box>
</SimpleGrid>
<Stack pt={15}>
<Input
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
@@ -93,9 +97,20 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateP
},
}}
placeholder="Input Nama Tahapan"
label="Judul Tahapan"
required
size="md"
value={title}
onChange={(e) => setTitle(e.target.value)}
onChange={(e) => {
setTitle(e.target.value)
setTouched({ ...touched, title: false })
}}
onBlur={() => setTouched({ ...touched, title: true })}
error={
touched.title && (
title == "" ? "Judul Tidak Boleh Kosong" : null
)
}
/>
</Stack>
<Box mt={"xl"}>

30
src/module/project/ui/create_project.tsx
View File

@@ -125,7 +125,7 @@ export default function CreateProject() {
return (
<Box>
<LayoutNavbarNew back="/project" title="tambah proyek" menu />
<LayoutNavbarNew back="/project" title="tambah Kegiatan" menu />
<Box p={20}>
<Stack>
{
@@ -156,7 +156,7 @@ export default function CreateProject() {
)
}
<TextInput
label="Proyek"
label="Kegiatan"
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
@@ -164,14 +164,17 @@ export default function CreateProject() {
},
}}
required withAsterisk
placeholder="Nama Proyek"
placeholder="Nama Kegiatan"
size="md"
value={body.title}
onChange={(e) => setBody({ ...body, title: e.target.value })}
onChange={(e) => {
setBody({ ...body, title: e.target.value })
setTouched({ ...touched, title: false })
}}
onBlur={() => setTouched({ ...touched, title: true })}
error={
touched.title && (
body.title == "" ? "Proyek Tidak Boleh Kosong" : null
body.title == "" ? "Kegiatan Tidak Boleh Kosong" : null
)
}
/>
@@ -304,7 +307,22 @@ export default function CreateProject() {
}
<Box mt="xl">
<Button color="white" bg={WARNA.biruTua} size="lg" radius={30} fullWidth onClick={() => setModal(true)}>
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => {
if (
body.title !== "" &&
body.idGroup !== ""
) {
setModal(true)
} else {
toast.error("Mohon lengkapi data terlebih dahulu");
}
}}>
Simpan
</Button>
</Box>

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

@@ -5,144 +5,163 @@ import toast from 'react-hot-toast';
import { funEditDetailProject, funGetDetailProject } from '../lib/api_project';
import moment from 'moment';
import { useShallowEffect } from '@mantine/hooks';
import { Box, Button, Group, Input, SimpleGrid, Stack, Text } from '@mantine/core';
import { Box, Button, Group, Input, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { DatePicker } from '@mantine/dates';
import LayoutModal from '@/module/_global/layout/layout_modal';
export default function EditDetailTaskProject() {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
const [name, setName] = useState("")
const param = useParams<{ id: string}>()
const [openModal, setOpenModal] = useState(false)
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
const [name, setName] = useState("")
const param = useParams<{ id: string }>()
const [openModal, setOpenModal] = useState(false)
const [touched, setTouched] = useState({
title: false,
});
async function onSubmit() {
if (value[0] == null || value[1] == null)
return toast.error("Error! harus memilih tanggal")
async function onSubmit() {
if (value[0] == null || value[1] == null)
return toast.error("Error! harus memilih tanggal")
if (name == "")
return toast.error("Error! harus memasukkan judul tugas")
if (name == "")
return toast.error("Error! harus memasukkan judul tugas")
try {
const res = await funEditDetailProject(param.id, {
title: name,
dateStart: value[0],
dateEnd: value[1],
try {
const res = await funEditDetailProject(param.id, {
title: name,
dateStart: value[0],
dateEnd: value[1],
})
})
if (res.success) {
toast.success(res.message);
} else {
toast.error(res.message);
if (res.success) {
toast.success(res.message);
} else {
toast.error(res.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal edit detail tugas Kegiatan, coba lagi nanti");
}
} catch (error) {
console.error(error);
toast.error("Gagal edit detail tugas proyek, coba lagi nanti");
}
}
}
async function getOneData() {
try {
const res = await funGetDetailProject(param.id);
if (res.success) {
setName(res.data.title)
setValue([
new Date(moment(res.data.dateStart).format('YYYY-MM-DD')),
new Date(moment(res.data.dateEnd).format('YYYY-MM-DD')),
])
} else {
toast.error(res.message);
async function getOneData() {
try {
const res = await funGetDetailProject(param.id);
if (res.success) {
setName(res.data.title)
setValue([
new Date(moment(res.data.dateStart).format('YYYY-MM-DD')),
new Date(moment(res.data.dateEnd).format('YYYY-MM-DD')),
])
} else {
toast.error(res.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan detail tugas Kegiatan, coba lagi nanti");
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan detail tugas proyek, coba lagi nanti");
}
}
}
useShallowEffect(() => {
getOneData();
}, [param.id])
useShallowEffect(() => {
getOneData();
}, [param.id])
return (
<Box>
<LayoutNavbarNew back="" title={"Edit Detail Proyek"} menu />
<Box p={20}>
<Group
justify="center"
bg={"white"}
py={20}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<DatePicker
styles={{}}
type="range"
value={value}
onChange={setValue}
size="md"
c={WARNA.biruTua}
/>
</Group>
<SimpleGrid cols={{ base: 2, 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"}` }}
>
<Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
</Group>
</Box>
<Box>
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
<Group
justify="center"
bg={"white"}
h={45}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
</Group>
</Box>
</SimpleGrid>
<Stack pt={15}>
<Input
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
placeholder="Input Nama Tahapan"
size="md"
value={name}
onChange={(e) => { setName(e.target.value) }}
/>
</Stack>
<Box mt={"xl"}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { setOpenModal(true) }}
>
Simpan
</Button>
</Box>
</Box>
return (
<Box>
<LayoutNavbarNew back="" title={"Edit Detail Kegiatan"} menu />
<Box p={20}>
<Group
justify="center"
bg={"white"}
py={20}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<DatePicker
styles={{}}
type="range"
value={value}
onChange={setValue}
size="md"
c={WARNA.biruTua}
/>
</Group>
<SimpleGrid cols={{ base: 2, 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"}` }}
>
<Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
</Group>
</Box>
<Box>
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
<Group
justify="center"
bg={"white"}
h={45}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
</Group>
</Box>
</SimpleGrid>
<Stack pt={15}>
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
placeholder="Input Nama Tahapan"
label="Judul Tahapan"
required
size="md"
value={name}
onChange={(e) => { setName(e.target.value) }}
onBlur={() => setTouched({ ...touched, title: true })}
error={
touched.title && (
name == "" ? "Judul Tidak Boleh Kosong" : null
)
}
/>
</Stack>
<Box mt={"xl"}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => {
if (
name !== ""
) {
setOpenModal(true)
} else {
toast.error("Judul Tidak Boleh Kosong")
}
}}
>
Simpan
</Button>
</Box>
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin mengubah data?"
onYes={(val) => {
if (val) {
onSubmit()
}
setOpenModal(false)
}} />
</Box>
);
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin mengubah data?"
onYes={(val) => {
if (val) {
onSubmit()
}
setOpenModal(false)
}} />
</Box>
);
}

29
src/module/project/ui/edit_task_project.tsx
View File

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { funEditProject, funGetOneProjectById } from '../lib/api_project';
import { useShallowEffect } from '@mantine/hooks';
import { Box, Button, Input, Stack } from '@mantine/core';
import { Box, Button, Input, Stack, TextInput } from '@mantine/core';
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
@@ -13,6 +13,9 @@ export default function EditTaskProject() {
const [name, setName] = useState("")
const [openModal, setOpenModal] = useState(false)
const param = useParams<{ id: string }>()
const [touched, setTouched] = useState({
name: false,
});
function onVerification() {
if (name == "")
@@ -32,7 +35,7 @@ export default function EditTaskProject() {
}
} catch (error) {
console.log(error)
toast.error("Gagal mengedit proyek, coba lagi nanti")
toast.error("Gagal mengedit Kegiatan, coba lagi nanti")
}
}
@@ -47,7 +50,7 @@ export default function EditTaskProject() {
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan data proyek, coba lagi nanti");
toast.error("Gagal mendapatkan data Kegiatan, coba lagi nanti");
}
}
@@ -56,11 +59,11 @@ export default function EditTaskProject() {
}, [param.id])
return (
<Box>
<LayoutNavbarNew back="" title={"Edit Judul Proyek"} menu />
<Box pos={"relative"} h={"100vh"}>
<LayoutNavbarNew back="" title={"Edit Judul Kegiatan"} menu />
<Box p={20}>
<Stack pt={15}>
<Input
<TextInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
@@ -68,12 +71,22 @@ export default function EditTaskProject() {
},
}}
placeholder="Tugas"
required
size="md"
value={name}
onChange={(e) => { setName(e.target.value) }}
onChange={(e) => {
setName(e.target.value)
setTouched({ ...touched, name: false })
}}
error={
touched.name && (
name == "" ? "Judul Tidak Boleh Kosong" : null
)
}
onBlur={() => setTouched({ ...touched, name: true })}
/>
</Stack>
<Box mt={"xl"}>
<Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
<Button
c={"white"}
bg={WARNA.biruTua}

82
src/module/project/ui/list_anggota_detail_project.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { LayoutDrawer, WARNA } from '@/module/_global';
import { LayoutDrawer, SkeletonSingle, WARNA } from '@/module/_global';
import { Avatar, Box, Flex, Group, SimpleGrid, Stack, Text } from '@mantine/core';
import React, { useState } from 'react';
import { funDeleteMemberProject, funGetOneProjectById } from '../lib/api_project';
@@ -33,7 +33,7 @@ export default function ListAnggotaDetailProject() {
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan member proyek, coba lagi nanti");
toast.error("Gagal mendapatkan member Kegiatan, coba lagi nanti");
} finally {
setLoading(false)
}
@@ -56,7 +56,7 @@ export default function ListAnggotaDetailProject() {
}
} catch (error) {
console.error(error);
toast.error("Gagal menghapus anggota proyek, coba lagi nanti");
toast.error("Gagal menghapus anggota Kegiatan, coba lagi nanti");
}
}
@@ -77,7 +77,15 @@ export default function ListAnggotaDetailProject() {
py={10}
>
{
loading ? <Text>loading</Text> :
loading ?
Array(6)
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonSingle />
</Box>
))
:
isData.length === 0 ? <Text>Tidak ada anggota</Text> :
isData.map((v, i) => {
return (
@@ -113,41 +121,41 @@ export default function ListAnggotaDetailProject() {
</Box>
<LayoutDrawer opened={openDrawer} title={dataChoose.name} onClose={() => setOpenDrawer(false)}>
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }}
>
<Flex onClick={() => { router.push('/member/' + dataChoose.id) }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<FaUser size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Lihat profil</Text>
</Box>
</Flex>
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }}
>
<Flex onClick={() => { router.push('/member/' + dataChoose.id) }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<FaUser size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Lihat profil</Text>
</Box>
</Flex>
<Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<IoIosCloseCircle size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Keluarkan anggota</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
</Box>
</LayoutDrawer>
<Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<IoIosCloseCircle size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Keluarkan anggota</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
</Box>
</LayoutDrawer>
<LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin mengeluarkan anggota?"
onYes={(val) => {
if (val) {
onSubmit()
}
setOpenModal(false)
}} />
<LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin mengeluarkan anggota?"
onYes={(val) => {
if (val) {
onSubmit()
}
setOpenModal(false)
}} />
</Box>
);

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

@@ -1,6 +1,6 @@
'use client'
import { WARNA } from '@/module/_global';
import { Box, Group, Text } from '@mantine/core';
import { Box, Group, Skeleton, Text } from '@mantine/core';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { funGetOneProjectById } from '../lib/api_project';
@@ -26,7 +26,7 @@ export default function ListFileDetailProject() {
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan file proyek, coba lagi nanti");
toast.error("Gagal mendapatkan file Kegiatan, coba lagi nanti");
} finally {
setLoading(false)
}
@@ -47,7 +47,18 @@ export default function ListFileDetailProject() {
}}>
{
loading ? <Text>loading</Text> :
loading ?
Array(1)
.fill(null)
.map((_, i) => (
<Box key={i} mb={10}>
<Group>
<Skeleton width={30} height={30} radius={"md"} />
<Skeleton width={"50%"} height={30} radius={"md"} />
</Group>
</Box>
))
:
isData.length === 0 ? <Text>Tidak ada file</Text> :
isData.map((item, index) => {
return (

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

@@ -35,7 +35,7 @@ export default function ListProject() {
setLoading(false);
} catch (error) {
toast.error("Gagal mendapatkan proyek, coba lagi nanti");
toast.error("Gagal mendapatkan Kegiatan, coba lagi nanti");
console.error(error);
} finally {
setLoading(false);
@@ -83,7 +83,7 @@ export default function ListProject() {
</Grid>
<Box pt={20}>
<Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={WARNA.biruTua}>Total Proyek</Text>
<Text fw={'bold'} c={WARNA.biruTua}>Total Kegiatan</Text>
<Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={WARNA.biruTua}>{isData.length}</Text>
</Flex>

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

@@ -1,5 +1,5 @@
'use client'
import { LayoutDrawer, WARNA } from '@/module/_global';
import { LayoutDrawer, SkeletonDetailListTugasTask, WARNA } from '@/module/_global';
import { Box, Center, Checkbox, Divider, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
@@ -37,7 +37,7 @@ export default function ListTugasDetailProject() {
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan list tugas proyek, coba lagi nanti");
toast.error("Gagal mendapatkan list tugas Kegiatan, coba lagi nanti");
} finally {
setLoading(false)
}
@@ -61,7 +61,7 @@ export default function ListTugasDetailProject() {
}
} catch (error) {
console.error(error);
toast.error("Gagal hapus tugas proyek, coba lagi nanti");
toast.error("Gagal hapus tugas Kegiatan, coba lagi nanti");
}
}
@@ -80,7 +80,7 @@ export default function ListTugasDetailProject() {
}
} catch (error) {
console.error(error);
toast.error("Gagal update status tugas proyek, coba lagi nanti");
toast.error("Gagal update status tugas Kegiatan, coba lagi nanti");
}
}
@@ -99,7 +99,9 @@ export default function ListTugasDetailProject() {
}}
>
{
loading ? <Text>loading</Text> :
loading ? <>
<SkeletonDetailListTugasTask />
</> :
isData.length === 0 ? <Text>Tidak ada tugas</Text> :
isData.map((item, index) => {
return (
@@ -163,7 +165,10 @@ export default function ListTugasDetailProject() {
</Box>
</Grid.Col>
</Grid>
<Divider my={"lg"} />
{isData.length >= 1
? "" :
<Divider my={"lg"} />
}
</Box>
)
})
@@ -207,7 +212,7 @@ export default function ListTugasDetailProject() {
</LayoutDrawer>
<LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin menghapus proyek ini?"
description="Apakah Anda yakin ingin menghapus Kegiatan ini?"
onYes={(val) => {
if (val) {
onDelete()

2
src/module/project/ui/menu_drawer_project.tsx
View File

@@ -16,7 +16,7 @@ export default function MenuDrawerProject() {
<IoAddCircle size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Tambah Proyek</Text>
<Text c={WARNA.biruTua}>Tambah Kegiatan</Text>
</Box>
</Flex>
<Flex onClick={() => window.location.href = "/project?cat=filter"} justify={'center'} align={'center'} direction={'column'} >

4
src/module/project/ui/navbar_detail_project.tsx
View File

@@ -28,7 +28,7 @@ export default function NavbarDetailProject() {
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan data proyek, coba lagi nanti");
toast.error("Gagal mendapatkan data Kegiatan, coba lagi nanti");
}
}
@@ -38,7 +38,7 @@ export default function NavbarDetailProject() {
return (
<>
<LayoutNavbarNew back="" title={name} menu={
<LayoutNavbarNew back="/project?status=0" title={name} menu={
<ActionIcon
variant="light"
bg={WARNA.bgIcon}

16
src/module/project/ui/progress_detail_project.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import { WARNA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Box, Grid, Progress, Text } from '@mantine/core';
import { ActionIcon, Box, Grid, Progress, Skeleton, Text } from '@mantine/core';
import { useParams } from 'next/navigation';
import React, { useState } from 'react';
import { HiMiniPresentationChartBar } from 'react-icons/hi2';
@@ -15,9 +15,11 @@ export default function ProgressDetailProject() {
const [valLastUpdate, setValLastUpdate] = useState('')
const param = useParams<{ id: string }>()
const refresh = useHookstate(globalRefreshProject)
const [loading, setLoading] = useState(true)
async function getOneData() {
try {
setLoading(true)
const res = await funGetOneProjectById(param.id, 'progress');
if (res.success) {
setValProgress(res.data.progress);
@@ -25,10 +27,12 @@ export default function ProgressDetailProject() {
} else {
toast.error(res.message);
}
setLoading(false)
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan progress proyek, coba lagi nanti");
toast.error("Gagal mendapatkan progress Kegiatan, coba lagi nanti");
} finally {
setLoading(false)
}
}
@@ -50,6 +54,9 @@ export default function ProgressDetailProject() {
return (
<>
<Box mt={10}>
{loading ?
<Skeleton width={"100%"} height={100} radius={"md"} />
:
<Box
p={20}
bg={"#DCEED8"}
@@ -71,7 +78,7 @@ export default function ProgressDetailProject() {
</Grid.Col>
<Grid.Col span={9}>
<Box>
<Text>Kemajuan Proyek {valProgress}%</Text>
<Text>Kemajuan Kegiatan {valProgress}%</Text>
<Progress
style={{
border: `1px solid ${"#BDBDBD"}`,
@@ -86,6 +93,7 @@ export default function ProgressDetailProject() {
</Grid.Col>
</Grid>
</Box>
}
</Box>
</>
);

2
src/module/project/ui/tab_project.tsx
View File

@@ -22,7 +22,7 @@ export default function TabProject() {
return (
<Box>
<LayoutNavbarNew back='/home' title='proyek'
<LayoutNavbarNew back='/home' title='Kegiatan'
menu={<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>} />