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

Merge pull request #181 from bipproduction/amalia/03-september-24

Browse Source 
Amalia/03 september 24
This commit is contained in:
Amalia
2024-09-03 14:16:36 +08:00
committed by GitHub
parent 21cfa509f4 a4b2cf64c5
commit b437d9686b
10 changed files with 568 additions and 260 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 });
}
}

31
src/app/api/home/route.ts
View File

@@ -150,7 +150,7 @@ export async function GET(request: Request) {
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)
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
@@ -195,14 +195,39 @@ export async function GET(request: Request) {
where: kondisi,
})
allData = _.map(_.groupBy(data, "extension"), (v: any) => ({
const groupData = _.map(_.groupBy(data, "extension"), (v: any) => ({
file: v[0].extension,
jumlah: v.length,
}))
// console.log(allData)
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
}
}
})
allData = [hasilImage, hasilFile]
} else if (kategori == "event") {
let kondisi

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>

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

@@ -9,12 +9,12 @@ import toast from "react-hot-toast";
import { funGetHome } from "../lib/api_home";
export default function ChartDocumentHome() {
const [options, setOptions] = useState<EChartsOption>({});
const [options, setOptions] = useState<EChartsOption>({})
const [isData, setData] = useState<any[]>([])
const [loading, setLoading] = useState(true);
const [loading, setLoading] = useState(true)
const color = ["#F3C96B", "#9EC97F", "#5971C0"]
useShallowEffect(() => {
loadData()
fetchData()
}, [])
@@ -28,6 +28,7 @@ export default function ChartDocumentHome() {
if (response.success) {
setData(response.data)
loadData(response.data)
} else {
toast.error(response.message);
}
@@ -40,7 +41,7 @@ export default function ChartDocumentHome() {
}
};
const loadData = () => {
const loadData = (value: any) => {
const option: EChartsOption = {
title: {
text: "DOKUMEN",
@@ -65,7 +66,7 @@ export default function ChartDocumentHome() {
xAxis: [
{
type: 'category',
data: ['File', 'Folder', 'Documen'],
data: value.map(({ name }: any) => name),
axisLabel: {
fontSize: 14
},
@@ -94,30 +95,16 @@ export default function ChartDocumentHome() {
name: 'Direct',
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: 35,
name: 'Folder',
itemStyle: {
color: "#9EC97F"
}
},
{
value: 58,
name: 'Documen',
itemStyle: {
color: "#5971C0"
}
},
],
color: color[i]
},
})
),
}
]
};