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

198
src/app/api/division/report/route.ts Normal file
View File

@@ -0,0 +1,198 @@
import { prisma } from "@/module/_global";
import { funGetUserByCookies } from "@/module/auth";
import _, { ceil } from "lodash";
import moment from "moment";
import { NextResponse } from "next/server";
export async function GET(request: Request) {
try {
const user = await funGetUserByCookies()
const { searchParams } = new URL(request.url)
const group = searchParams.get("group")
const division = searchParams.get("division")
const date = searchParams.get("date")
if (user.id == undefined) {
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 })
}
// CHART PROGRESS
let kondisiProgress
if (division == "undefined") {
kondisiProgress = {
isActive: true,
updatedAt: {
lte: new Date(String(date))
},
Division: {
idGroup: String(group)
}
}
} else {
kondisiProgress = {
isActive: true,
idDivision: String(division),
updatedAt: {
lte: new Date(String(date))
},
}
}
const data = await prisma.divisionProject.groupBy({
where: kondisiProgress,
by: ["status"],
_count: true
})
const dataStatus = [{ name: 'Segera dikerjakan', status: 0 }, { name: 'Dikerjakan', status: 1 }, { name: 'Selesai dikerjakan', status: 2 }, { name: 'Dibatalkan', status: 3 }]
const hasilProgres: any[] = []
let input
for (let index = 0; index < dataStatus.length; index++) {
const cek = data.some((i: any) => i.status == dataStatus[index].status)
if (cek) {
const find = ((Number(data.find((i: any) => i.status == dataStatus[index].status)?._count) * 100) / data.reduce((n, { _count }) => n + _count, 0)).toFixed(2)
input = {
name: dataStatus[index].name,
value: find
}
} else {
input = {
name: dataStatus[index].name,
value: 0
}
}
hasilProgres.push(input)
}
// CHART DOKUMEN
let kondisi
if (division == "undefined") {
kondisi = {
isActive: true,
category: 'FILE',
Division: {
idGroup: String(group)
},
createdAt: {
lte: new Date(String(date))
},
}
} else {
kondisi = {
isActive: true,
category: 'FILE',
idDivision: String(division),
createdAt: {
lte: new Date(String(date))
},
}
}
const dataDokumen = await prisma.divisionDocumentFolderFile.findMany({
where: kondisi,
})
const groupData = _.map(_.groupBy(dataDokumen, "extension"), (v: any) => ({
file: v[0].extension,
jumlah: v.length,
}))
const image = ['jpg', 'jpeg', 'png', 'heic']
let hasilImage = {
name: 'Gambar',
value: 0
}
let hasilFile = {
name: 'Dokumen',
value: 0
}
groupData.map((v: any) => {
if (image.some((i: any) => i == v.file)) {
hasilImage = {
name: 'Gambar',
value: hasilImage.value + v.jumlah
}
} else {
hasilFile = {
name: 'Dokumen',
value: hasilFile.value + v.jumlah
}
}
})
const hasilDokumen = [hasilImage, hasilFile]
// CHART EVENT
let kondisiEvent
if (division == "undefined") {
kondisiEvent = {
isActive: true,
Division: {
idGroup: String(group)
},
dateStart: new Date(String(date))
}
} else {
kondisiEvent = {
isActive: true,
idDivision: String(division),
dateStart: new Date(String(date))
}
}
const dataEvent = await prisma.divisionCalendar.findMany({
where: kondisiEvent,
select: {
id: true,
idDivision: true,
title: true,
desc: true,
status: true,
timeStart: true,
dateStart: true,
timeEnd: true,
dateEnd: true,
createdAt: true,
User: {
select: {
name: true
}
}
},
orderBy: {
createdAt: 'desc'
}
})
const hasilEvent = dataEvent.map((v: any) => ({
..._.omit(v, ["User"]),
user_name: v.User.name,
timeStart: moment.utc(v.timeStart).format('HH:mm'),
timeEnd: moment.utc(v.timeEnd).format('HH:mm')
}))
const allData = {
progress: hasilProgres,
dokumen: hasilDokumen,
event: hasilEvent
}
return NextResponse.json({ success: true, message: "Berhasil mendapatkan data", data: allData }, { status: 200 });
}
catch (error) {
console.log(error);
return NextResponse.json({ success: false, message: "Gagal mendapatkan data, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
}
}

5
src/module/division_new/lib/api_division.ts
View File

@@ -77,4 +77,9 @@ export const funAddDivisionMember = async (path: string, data: IFormMemberDivisi
export const funGetListDivisionByIdDivision = async (path: string) => {
const response = await fetch(`/api/division/more${path}`);
return await response.json().catch(() => null);
}
export const funGetReportDivision = async (path?: string) => {
const response = await fetch(`/api/division/report${(path) ? path : ''}`, { next: { tags: ['discussion'] } });
return await response.json().catch(() => null);
}

14
src/module/division_new/lib/type_division.ts
View File

@@ -57,4 +57,18 @@ export interface IDataMemberDivision {
isLeader: string,
name: string,
img: string
}
export interface IDataReportDivision{
id: string
idDivision: string
title: string
desc: string
status: number
timeStart: string
timeEnd: string
dateStart: string
dateEnd: string
createdAt: string
user_name: string
}

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>

1
src/module/home/ui/chart_document.tsx
View File

@@ -15,7 +15,6 @@ export default function ChartDocumentHome() {
const color = ["#F3C96B", "#9EC97F", "#5971C0"]
useShallowEffect(() => {
// loadData()
fetchData()
}, [])