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

upd: report divisi

Browse Source 
Deskripsi:
- report semua divisi
- report 1 divisi

No Issues
This commit is contained in:
amel
2024-09-03 14:15:14 +08:00
parent 309f0f17e0
commit a4b2cf64c5
9 changed files with 525 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
src/module/division_new/ui/create_report.tsx
View File

@@ -1,18 +1,86 @@
"use client";
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import { Box, Select, Stack, Text } from "@mantine/core";
import { Box, Select, Skeleton, Stack, Text } from "@mantine/core";
import { DateInput } from "@mantine/dates";
import React, { useState } from "react";
import EchartPaiReport from "./echart_pai_report";
import EchartBarReport from "./echart_bar_report";
import EventReport from "./event_report";
import DiscussionReport from "./discussion_report";
import { funGetAllGroup, IDataGroup } from "@/module/group";
import toast from "react-hot-toast";
import { useShallowEffect } from "@mantine/hooks";
import { funGetReportDivision } from "../lib/api_division";
import { useParams } from "next/navigation";
import moment from "moment";
export default function CreateReport() {
const [value, setValue] = useState<Date | null>(null);
const [dataGroup, setDataGroup] = useState<IDataGroup[]>([]);
const [loading, setLoading] = useState(false);
const [tampil, setTampil] = useState(false);
const [isGroup, setIsGroup] = useState("");
const param = useParams<{ id: string }>()
const [report, setReport] = useState({
progress: [],
dokumen: [],
event: [],
})
async function loadData() {
const loadGroup = await funGetAllGroup('?active=true')
if (loadGroup.success) {
setDataGroup(loadGroup.data);
} else {
toast.error(loadGroup.message);
}
}
async function onReport(group: string, date: any) {
try {
setReport({
progress: [],
dokumen: [],
event: [],
})
setTampil(true)
setLoading(true)
const res = await funGetReportDivision(`?group=${group}&division=${param.id}&date=${moment(date).format("YYYY-MM-DD")}`)
if (res.success) {
setReport(res.data)
} else {
toast.error(res.message)
}
} catch (error) {
console.log(error)
toast.error("Gagal mendapatkan data, coba lagi nanti");
} finally {
setLoading(false)
}
}
function onChooseGroup(val: any) {
if (val != null && val != "" && value != null && value != undefined) {
onReport(val, value)
}
setIsGroup(String(val))
}
function onChangeDate(val: any) {
if (val != null && val != "" && isGroup != "" && isGroup != null) {
onReport(isGroup, val)
}
setValue(val)
}
useShallowEffect(() => {
loadData();
}, []);
return (
<Box>
<LayoutNavbarNew back="/division" title="Report Divisi" menu />
<LayoutNavbarNew back="/division" title="Laporan Divisi" menu />
<Box p={20}>
<Stack>
<Select
@@ -21,64 +89,83 @@ export default function CreateReport() {
size="md"
required
radius={10}
data={dataGroup?.map((pro: any) => ({
value: String(pro.id),
label: pro.name
}))}
onChange={(val) => { onChooseGroup(val) }}
/>
<DateInput
value={value}
onChange={setValue}
onChange={(val) => { onChangeDate(val) }}
radius={10}
size="md"
required
label="Date input"
placeholder="Date input"
label="Tanggal"
placeholder="Tanggal"
/>
<Box pt={10}>
<Box
bg={"white"}
style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
borderRadius: 10,
padding: 10,
}}
>
<EchartPaiReport />
</Box>
</Box>
<Box pt={10}>
<Box
bg={"white"}
style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
borderRadius: 10,
padding: 10,
}}
>
<EchartBarReport />
</Box>
</Box>
<Box pt={10}>
<Box
bg={"white"}
style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
borderRadius: 10,
padding: 10,
}}
>
<EventReport />
</Box>
</Box>
{/* <Box pt={10}>
<Box
bg={"white"}
style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
borderRadius: 10,
padding: 10,
}}
>
<DiscussionReport />
</Box>
</Box> */}
{
tampil &&
<>
{
loading ?
<>
<Box pb={20}>
<Skeleton width={"100%"} height={200} radius={"md"} />
</Box>
{
Array(2)
.fill(null)
.map((_, i) => (
<Box key={i} mb={0}>
<Skeleton height={100} width={"100%"} radius={"md"} />
</Box>
))
}
</>
:
<>
<Box pt={10}>
<Box
bg={"white"}
style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
borderRadius: 10,
padding: 10,
}}
>
<EchartPaiReport data={report.progress} />
</Box>
</Box>
<Box pt={10}>
<Box
bg={"white"}
style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
borderRadius: 10,
padding: 10,
}}
>
<EchartBarReport data={report.dokumen} />
</Box>
</Box>
<Box pt={10}>
<Box
bg={"white"}
style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
borderRadius: 10,
padding: 10,
}}
>
<EventReport data={report.event} tgl={moment(value).format("DD MMMM YYYY")} />
</Box>
</Box>
</>
}
</>
}
</Stack>
</Box>
</Box>

36
src/module/division_new/ui/echart_bar_report.tsx
View File

@@ -6,14 +6,15 @@ import * as echarts from 'echarts';
import { Box } from '@mantine/core';
import { WARNA } from '@/module/_global';
export default function EchartBarReport() {
export default function EchartBarReport({ data }: { data: any }) {
const [options, setOptions] = useState<EChartsOption>({});
const color = ["#F3C96B", "#9EC97F", "#5971C0"]
useShallowEffect(() => {
loadData()
}, [])
loadData(data)
}, [data])
const loadData = () => {
const loadData = (value: any) => {
const option: EChartsOption = {
title: {
text: "DOKUMEN",
@@ -38,7 +39,7 @@ export default function EchartBarReport() {
xAxis: [
{
type: 'category',
data: ['File', 'Dokumen'],
data: value.map(({ name }: any) => name),
axisLabel: {
fontSize: 14
},
@@ -67,23 +68,16 @@ export default function EchartBarReport() {
name: 'Dokumen',
type: 'bar',
barWidth: '70%',
data: [
{
value: 78,
name: 'File',
data: value.map(
(v: any, i: any) =>
({
name: v.name,
value: v.value,
itemStyle: {
color: "#F3C96B"
}
},
{
value: 58,
name: 'Dokumen',
itemStyle: {
color: "#5971C0"
}
},
],
color: color[i]
},
})
),
}
]
};

15
src/module/division_new/ui/echart_pai_report.tsx
View File

@@ -6,14 +6,14 @@ import * as echarts from 'echarts';
import { Box } from '@mantine/core';
import { WARNA } from '@/module/_global';
export default function EchartPaiReport() {
export default function EchartPaiReport({ data }: { data: any }) {
const [options, setOptions] = useState<EChartsOption>({});
useShallowEffect(() => {
loadData()
}, [])
loadData(data)
}, [data])
const loadData = () => {
const loadData = (value: any) => {
const option: EChartsOption = {
title: {
text: "PROGRES TUGAS",
@@ -42,12 +42,7 @@ export default function EchartPaiReport() {
return `${a.value + "%"}`;
},
},
data: [
{ value: 25, name: 'Dikerjakan' },
{ value: 35, name: 'Selesai dikerjakan' },
{ value: 10, name: 'Segera dikerjakan' },
{ value: 30, name: 'Batal dikerjakan' },
],
data: value,
emphasis: {
itemStyle: {
shadowBlur: 10,

129
src/module/division_new/ui/event_report.tsx
View File

@@ -1,98 +1,43 @@
import React, { useState } from 'react';
import { EChartsOption, color } from "echarts";
import EChartsReact from "echarts-for-react";
import { useShallowEffect } from '@mantine/hooks';
import * as echarts from 'echarts';
import { Box } from '@mantine/core';
import { WARNA } from '@/module/_global';
import { Box, Divider, Group, ScrollArea, Stack, Text } from '@mantine/core';
import React from 'react';
import { IDataReportDivision } from '../lib/type_division';
import _ from 'lodash';
import { useRouter } from 'next/navigation';
export default function EventReport() {
const [options, setOptions] = useState<EChartsOption>({});
useShallowEffect(() => {
loadData()
}, [])
const loadData = () => {
const option: EChartsOption = {
title: {
text: "EVENT",
top: '2%',
left: 'center',
textStyle: {
color: WARNA.biruTua
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Belum Dilaksanakan', 'Sudah Dilaksanakan'],
axisLabel: {
fontSize: 14
},
axisTick: {
alignWithLabel: true
},
axisLine: {
show: true,
},
}
],
yAxis: [
{
type: 'value',
show: true,
splitLine: {
lineStyle: {
color: "gray",
opacity: 0.1
}
},
}
],
series: [
{
name: 'Event',
type: 'bar',
barWidth: '70%',
data: [
{
value: 78,
name: 'Belum dilaksanakan',
itemStyle: {
color: "#BA3E3E"
}
},
{
value: 58,
name: 'Sudah dilaksanakan',
itemStyle: {
color: "#29A253"
}
},
],
}
]
};
setOptions(option);
}
export default function EventReport({ data, tgl }: { data: IDataReportDivision[], tgl: string }) {
const router = useRouter()
return (
<Box>
<EChartsReact style={{ height: 400, width: "auto" }} option={options} />
<Text mb={20} mt={10} ta={'center'} fw={"bold"}>EVENT <br /> {tgl}</Text>
{
_.isEmpty(data)
?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '20vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada event</Text>
</Box>
:
data.map((event, index) => {
const bgColor = ['#D8D8F1', '#FED6C5'][index % 2]
const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
return (
<Box key={event.id} mt={10}>
<Box onClick={() => router.push(`/division/${event.idDivision}/calender/${event.id}`)} bg={bgColor} pl={15} p={10} style={{
borderRadius: 10
}} h={113}>
<Group>
<Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
<Box>
<Text>{event.timeStart} - {event.timeEnd}</Text>
<Text fw={"bold"}>{event.title}</Text>
<Text>Dibuat oleh : {event.user_name}</Text>
</Box>
</Group>
</Box>
</Box>
)
})
}
</Box>
);
}
}

164
src/module/division_new/ui/report_division_id.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { Box, Stack } from '@mantine/core';
import { Box, Skeleton, Stack } from '@mantine/core';
import { DateInput } from '@mantine/dates';
import React, { useState } from 'react';
import EchartPaiReport from './echart_pai_report';
@@ -8,72 +8,130 @@ import EchartBarReport from './echart_bar_report';
import EventReport from './event_report';
import DiscussionReport from './discussion_report';
import { useParams } from 'next/navigation';
import { funGetReportDivision } from '../lib/api_division';
import moment from 'moment';
import "moment/locale/id";
import toast from 'react-hot-toast';
export default function ReportDivisionId() {
const [value, setValue] = useState<Date | null>(null);
const param = useParams<{ id: string }>()
const [loading, setLoading] = useState(false);
const [tampil, setTampil] = useState(false);
const [report, setReport] = useState({
progress: [],
dokumen: [],
event: [],
})
async function onReport(date: any) {
try {
setReport({
progress: [],
dokumen: [],
event: [],
})
setTampil(true)
setLoading(true)
const res = await funGetReportDivision(`?division=${param.id}&date=${moment(date).format("YYYY-MM-DD")}`)
if (res.success) {
setReport(res.data)
} else {
toast.error(res.message)
}
} catch (error) {
console.log(error)
toast.error("Gagal mendapatkan data, coba lagi nanti");
} finally {
setLoading(false)
}
}
function onChangeDate(val: any) {
if (val != null && val != "") {
onReport(val)
}
setValue(val)
}
return (
<Box>
<LayoutNavbarNew back={`/division/${param.id}`} title="Report Divisi" menu />
<LayoutNavbarNew back={`/division/${param.id}`} title="Laporan Divisi" menu />
<Box p={20}>
<Stack>
<DateInput
value={value}
onChange={setValue}
onChange={(val) => { onChangeDate(val) }}
radius={10}
size="md"
required
label="Date input"
placeholder="Date input"
label="Tanggal"
placeholder="Tanggal"
/>
<Box pt={10}>
<Box
bg={"white"}
style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
borderRadius: 10,
padding: 10,
}}
>
<EchartPaiReport />
</Box>
</Box>
<Box pt={10}>
<Box
bg={"white"}
style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
borderRadius: 10,
padding: 10,
}}
>
<EchartBarReport />
</Box>
</Box>
<Box pt={10}>
<Box
bg={"white"}
style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
borderRadius: 10,
padding: 10,
}}
>
<EventReport />
</Box>
</Box>
{/* <Box pt={10}>
<Box
bg={"white"}
style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
borderRadius: 10,
padding: 10,
}}
>
<DiscussionReport />
</Box>
</Box> */}
{
tampil &&
<>
{
loading ?
<>
<Box pb={20}>
<Skeleton width={"100%"} height={200} radius={"md"} />
</Box>
{
Array(2)
.fill(null)
.map((_, i) => (
<Box key={i} mb={0}>
<Skeleton height={100} width={"100%"} radius={"md"} />
</Box>
))
}
</>
:
<>
<Box pt={10}>
<Box
bg={"white"}
style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
borderRadius: 10,
padding: 10,
}}
>
<EchartPaiReport data={report.progress} />
</Box>
</Box>
<Box pt={10}>
<Box
bg={"white"}
style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
borderRadius: 10,
padding: 10,
}}
>
<EchartBarReport data={report.dokumen} />
</Box>
</Box>
<Box pt={10}>
<Box
bg={"white"}
style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
borderRadius: 10,
padding: 10,
}}
>
<EventReport data={report.event} tgl={moment(value).format("DD MMMM YYYY")} />
</Box>
</Box>
</>
}
</>
}
</Stack>
</Box>
</Box>