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

feat : update api project

Browse Source
This commit is contained in:
lukman
2024-08-21 17:30:41 +08:00
parent a36fe88998
commit dab77c0bbc
12 changed files with 774 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/module/project/lib/api_project.ts
View File

@@ -3,4 +3,9 @@
export const funGetAllProject = async (path?: string) => {
const response = await fetch(`/api/project${(path) ? path : ''}`, { next: { tags: ['project'] } });
return await response.json().catch(() => null);
}
export const funGetOneProjectById = async (path: string, kategori: string) => {
const response = await fetch(`/api/project/${path}?cat=${kategori}`);
return await response.json().catch(() => null);
}

24
src/module/project/lib/type_project.ts
View File

@@ -4,4 +4,26 @@ export interface IDataProject {
desc: string
status: number
member: number
}
}
export interface IDataListTaskProject {
id: string
name: string
desc: string
status: number
dateStart: string
dateEnd: string
}
export interface IDataFileProject {
id: string
name: string
extension: string
}
export interface IDataMemberProject {
id: string
idUser: string
name: string
email: string
}

3
src/module/project/lib/val_project.ts Normal file
View File

@@ -0,0 +1,3 @@
import { hookstate } from "@hookstate/core";
export const globalRefreshProject = hookstate<boolean>(false)

127
src/module/project/ui/liat_anggota_detail_project.tsx
View File

@@ -1,47 +1,46 @@
'use client'
import { WARNA } from '@/module/_global';
import { Avatar, Box, Flex, Group, Text } from '@mantine/core';
import React from 'react';
import React, { useState } from 'react';
import { funGetOneProjectById } from '../lib/api_project';
import toast from 'react-hot-toast';
import { useParams } from 'next/navigation';
import { useShallowEffect } from '@mantine/hooks';
import { IDataMemberProject } from '../lib/type_project';
const dataTugas = [
{
id: 1,
name: "Iqbal Ramadan",
image: "https://i.pravatar.cc/1000?img=5",
email: "iqbal.ramadan@gmail.com",
},
{
id: 2,
name: "Doni Setiawan",
image: "https://i.pravatar.cc/1000?img=10",
email: "doni.setiawan@gmail.com",
},
{
id: 3,
name: "Rangga Agung",
image: "https://i.pravatar.cc/1000?img=51",
email: "rangga.agung@gmail.com",
},
{
id: 4,
name: "Ramadan Sananta",
image: "https://i.pravatar.cc/1000?img=15",
email: "ramadan@gmail.com",
},
{
id: 5,
name: "Imam Baroni",
image: "https://i.pravatar.cc/1000?img=22",
email: "imam.baroni@gmail.com",
},
];
export default function LiatAnggotaDetailProject() {
const [isData, setData] = useState<IDataMemberProject[]>([])
const param = useParams<{ id: string }>()
const [loading, setLoading] = useState(true)
async function getOneData() {
try {
setLoading(true)
const res = await funGetOneProjectById(param.id, 'member');
if (res.success) {
setData(res.data)
} else {
toast.error(res.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan member proyek, coba lagi nanti");
} finally {
setLoading(false)
}
}
useShallowEffect(() => {
getOneData();
}, [param.id])
return (
<Box pt={20}>
<Group justify="space-between">
<Text c={WARNA.biruTua}>Anggota Terpilih</Text>
<Text c={WARNA.biruTua}>Total 10 Anggota</Text>
<Text c={WARNA.biruTua}>Total {isData.length} Anggota</Text>
</Group>
<Box pt={10}>
<Box mb={20}>
@@ -53,34 +52,38 @@ export default function LiatAnggotaDetailProject() {
px={20}
py={10}
>
<Text c={WARNA.biruTua} fw={"bold"}>
Divisi Kerohanian
</Text>
{dataTugas.map((v, i) => {
return (
<Flex
justify={"space-between"}
align={"center"}
mt={20}
key={i}
>
<Group>
<Avatar src={v.image} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{v.name}
</Text>
<Text c={"#5A687D"} fz={14}>
{v.email}
</Text>
</Box>
</Group>
<Text c={WARNA.biruTua} fw={"bold"}>
Anggota
</Text>
</Flex>
);
})}
{
loading ? <Text>loading</Text> :
isData.length === 0 ? <Text>Tidak ada anggota</Text> :
isData.map((v, i) => {
return (
<Flex
justify={"space-between"}
align={"center"}
mt={20}
key={i}
onClick={() => {
// setDataChoose({ id: v.idUser, name: v.name })
// setOpenDrawer(true)
}}
>
<Group>
<Avatar src={""} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{v.name}
</Text>
<Text c={"#5A687D"} fz={14}>
{v.email}
</Text>
</Box>
</Group>
<Text c={WARNA.biruTua} fw={"bold"}>
Anggota
</Text>
</Flex>
);
})}
</Box>
</Box>
</Box>

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

@@ -1,9 +1,41 @@
'use client'
import { WARNA } from '@/module/_global';
import { Box, Text } from '@mantine/core';
import React from 'react';
import { Box, Group, Text } from '@mantine/core';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { funGetOneProjectById } from '../lib/api_project';
import { useParams } from 'next/navigation';
import { useShallowEffect } from '@mantine/hooks';
import { IDataFileProject } from '../lib/type_project';
import { BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
export default function ListFileDetailProject() {
const [isData, setData] = useState<IDataFileProject[]>([])
const param = useParams<{ id: string }>()
const [loading, setLoading] = useState(true)
async function getOneData() {
try {
setLoading(true)
const res = await funGetOneProjectById(param.id, 'file');
if (res.success) {
setData(res.data)
} else {
toast.error(res.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan file proyek, coba lagi nanti");
} finally {
setLoading(false)
}
}
useShallowEffect(() => {
getOneData();
}, [param.id])
return (
<>
<Box pt={20}>
@@ -13,7 +45,33 @@ export default function ListFileDetailProject() {
border: `1px solid ${"#D6D8F6"}`,
padding: 20
}}>
<Text>Tidak ada file</Text>
{
loading ? <Text>loading</Text> :
isData.length === 0 ? <Text>Tidak ada file</Text> :
isData.map((item, index) => {
return (
<Box
key={index}
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 10
}}
mb={10}
>
<Group>
{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 == "heic" && <BsFiletypeHeic size={25} />}
<Text>{item.name}</Text>
</Group>
</Box>
)
})
}
</Box>
</Box>
</>

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

@@ -1,10 +1,41 @@
'use client'
import { WARNA } from '@/module/_global';
import { Box, Center, Checkbox, Grid, Group, SimpleGrid, Text } from '@mantine/core';
import React from 'react';
import { Box, Center, Checkbox, Divider, Grid, Group, SimpleGrid, Text } from '@mantine/core';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { AiOutlineFileSync } from 'react-icons/ai';
import { funGetOneProjectById } from '../lib/api_project';
import { useParams } from 'next/navigation';
import { useShallowEffect } from '@mantine/hooks';
import { IDataListTaskProject } from '../lib/type_project';
export default function ListTugasDetailProject() {
const [isData, setData] = useState<IDataListTaskProject[]>([])
const [loading, setLoading] = useState(true)
const param = useParams<{ id: string }>()
async function getOneData() {
try {
setLoading(true)
const res = await funGetOneProjectById(param.id, 'task');
if (res.success) {
setData(res.data)
} else {
toast.error(res.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan list tugas proyek, coba lagi nanti");
} finally {
setLoading(false)
}
}
useShallowEffect(() => {
getOneData();
}, [param.id])
return (
<>
<Box pt={20}>
@@ -19,59 +50,76 @@ export default function ListTugasDetailProject() {
padding: 20,
}}
>
<Grid>
<Grid.Col span={"auto"}>
<Center>
<Checkbox color="teal" size="md" />
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Box
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 10,
}}
>
<Group>
<AiOutlineFileSync size={25} />
<Text>Laporan Permasyarakatan</Text>
</Group>
</Box>
<Box>
<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>16 Juni 2024</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>20 Juni 2024</Text>
</Group>
</Box>
</SimpleGrid>
</Box>
</Grid.Col>
</Grid>
{
loading ? <Text>loading</Text> :
isData.length === 0 ? <Text>Tidak ada tugas</Text> :
isData.map((item, index) => {
return (
<Box key={index}>
<Grid
onClick={() => {
// setIdData(item.id)
// setStatusData(item.status)
// setOpenDrawer(true)
}}
>
<Grid.Col span={"auto"}>
<Center>
<Checkbox color="teal" size="md" checked={(item.status === 1) ? true : false} disabled />
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Box
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 10,
}}
>
<Group>
<AiOutlineFileSync size={25} />
<Text>{item.name}</Text>
</Group>
</Box>
<Box>
<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>{item.dateStart}</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>{item.dateEnd}</Text>
</Group>
</Box>
</SimpleGrid>
</Box>
</Grid.Col>
</Grid>
<Divider my={"lg"}/>
</Box>
)
})
}
</Box>
</Box>
</>

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

@@ -1,10 +1,53 @@
'use client'
import { WARNA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Box, Grid, Progress, Text } from '@mantine/core';
import React from 'react';
import { useParams } from 'next/navigation';
import React, { useEffect, useState } from 'react';
import { HiMiniPresentationChartBar } from 'react-icons/hi2';
import { globalRefreshProject } from '../lib/val_project';
import toast from 'react-hot-toast';
import { funGetOneProjectById } from '../lib/api_project';
import { useShallowEffect } from '@mantine/hooks';
export default function ProgressDetailProject() {
const [valProgress, setValProgress] = useState(0)
const [valLastUpdate, setValLastUpdate] = useState('')
const param = useParams<{ id: string }>()
const refresh = useHookstate(globalRefreshProject)
async function getOneData() {
try {
const res = await funGetOneProjectById(param.id, 'progress');
console.log("data",res)
if (res.success) {
setValProgress(res.data.progress);
setValLastUpdate(res.data.lastUpdate);
} else {
toast.error(res.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan progress proyek, coba lagi nanti");
}
}
function onRefresh() {
if (refresh.get()) {
getOneData()
refresh.set(false)
}
}
useEffect(() => {
onRefresh()
}, [refresh.get()])
useShallowEffect(() => {
getOneData();
}, [param.id])
return (
<>
<Box mt={10}>
@@ -29,7 +72,7 @@ export default function ProgressDetailProject() {
</Grid.Col>
<Grid.Col span={9}>
<Box>
<Text>Kemajuan Proyek 60%</Text>
<Text>Kemajuan Proyek {valProgress}%</Text>
<Progress
style={{
border: `1px solid ${"#BDBDBD"}`,
@@ -38,7 +81,7 @@ export default function ProgressDetailProject() {
color="#FCAA4B"
radius="md"
size="xl"
value={60}
value={valProgress}
/>
</Box>
</Grid.Col>

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

@@ -103,65 +103,68 @@ export default function ListTugasDetailTask() {
isData.length === 0 ? <Text>Tidak ada tugas</Text> :
isData.map((item, index) => {
return (
<Grid key={index} style={{ borderBottom: "1px solid #D6D8F6" }} pb={10} mb={10}
onClick={() => {
setIdData(item.id)
setStatusData(item.status)
setOpenDrawer(true)
}}
>
<Grid.Col span={"auto"}>
<Center>
<Checkbox color="teal" size="md" checked={(item.status === 1) ? true : false} disabled />
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Box
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 10,
}}
>
<Group>
<AiOutlineFileSync size={25} />
<Text>{item.title}</Text>
</Group>
</Box>
<Box>
<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>{item.dateStart}</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>{item.dateEnd}</Text>
</Group>
</Box>
</SimpleGrid>
</Box>
</Grid.Col>
</Grid>
<Box key={index}>
<Grid
onClick={() => {
setIdData(item.id)
setStatusData(item.status)
setOpenDrawer(true)
}}
>
<Grid.Col span={"auto"}>
<Center>
<Checkbox color="teal" size="md" checked={(item.status === 1) ? true : false} disabled />
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Box
style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 10,
}}
>
<Group>
<AiOutlineFileSync size={25} />
<Text>{item.title}</Text>
</Group>
</Box>
<Box>
<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>{item.dateStart}</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>{item.dateEnd}</Text>
</Group>
</Box>
</SimpleGrid>
</Box>
</Grid.Col>
</Grid>
<Divider my={"lg"} />
</Box>
)
})
}