upd: report divisi

Deskripsi:
- report semua divisi
- report 1 divisi

No Issues

src/app/api/division/report/route.ts

@@ -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 });
+   }
+}

src/module/division_new/lib/api_division.ts

@@ -78,3 +78,8 @@ 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);
+}

src/module/division_new/lib/type_division.ts

@@ -58,3 +58,17 @@ export interface IDataMemberDivision {
    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
+}

src/module/division_new/ui/create_report.tsx

@@ -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"
+            label="Tanggal"
-            placeholder="Date input"
+            placeholder="Tanggal"
           />
-          <Box pt={10}>
+          {
-            <Box
+            tampil &&
-              bg={"white"}
+            <>
-              style={{
+              {
-                border: `1px solid ${WARNA.borderBiruMuda}`,
+                loading ?
-                borderRadius: 10,
+                  <>
-                padding: 10,
+                    <Box pb={20}>
-              }}
+                      <Skeleton width={"100%"} height={200} radius={"md"} />
-            >
+                    </Box>
-              <EchartPaiReport />
+                    {
-            </Box>
+                      Array(2)
-          </Box>
+                        .fill(null)
-          <Box pt={10}>
+                        .map((_, i) => (
-            <Box
+                          <Box key={i} mb={0}>
-              bg={"white"}
+                            <Skeleton height={100} width={"100%"} radius={"md"} />
-              style={{
+                          </Box>
-                border: `1px solid ${WARNA.borderBiruMuda}`,
+                        ))
-                borderRadius: 10,
+                    }
-                padding: 10,
+                  </>
-              }}
+                  :
-            >
+                  <>
-              <EchartBarReport />
+                    <Box pt={10}>
-            </Box>
+                      <Box
-          </Box>
+                        bg={"white"}
-          <Box pt={10}>
+                        style={{
-            <Box
+                          border: `1px solid ${WARNA.borderBiruMuda}`,
-              bg={"white"}
+                          borderRadius: 10,
-              style={{
+                          padding: 10,
-                border: `1px solid ${WARNA.borderBiruMuda}`,
+                        }}
-                borderRadius: 10,
+                      >
-                padding: 10,
+                        <EchartPaiReport data={report.progress} />
-              }}
+                      </Box>
-            >
+                    </Box>
-              <EventReport />
+                    <Box pt={10}>
-            </Box>
+                      <Box
-          </Box>
+                        bg={"white"}
-          {/* <Box pt={10}>
+                        style={{
-            <Box
+                          border: `1px solid ${WARNA.borderBiruMuda}`,
-              bg={"white"}
+                          borderRadius: 10,
-              style={{
+                          padding: 10,
-                border: `1px solid ${WARNA.borderBiruMuda}`,
+                        }}
-                borderRadius: 10,
+                      >
-                padding: 10,
+                        <EchartBarReport data={report.dokumen} />
-              }}
+                      </Box>
-            >
+                    </Box>
-              <DiscussionReport />
+                    <Box pt={10}>
-            </Box>
+                      <Box
-          </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>

src/module/division_new/ui/echart_bar_report.tsx

@@ -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: [
+          data: value.map(
-            {
+            (v: any, i: any) =>
-              value: 78,
+            ({
-              name: 'File',
+              name: v.name,
+              value: v.value,
               itemStyle: {
-                color: "#F3C96B"
+                color: color[i]
-              }
+              },
-            },
+            })
-            {
+          ),
-              value: 58,
-              name: 'Dokumen',
-              itemStyle: {
-                color: "#5971C0"
-              }
-            },
-
-          ],
         }
       ]
     };

src/module/division_new/ui/echart_pai_report.tsx

@@ -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: [
+          data: value,
-            { value: 25, name: 'Dikerjakan' },
-            { value: 35, name: 'Selesai dikerjakan' },
-            { value: 10, name: 'Segera dikerjakan' },
-            { value: 30, name: 'Batal dikerjakan' },
-          ],
           emphasis: {
             itemStyle: {
               shadowBlur: 10,

src/module/division_new/ui/event_report.tsx

@@ -1,98 +1,43 @@
-import React, { useState } from 'react';
+import { Box, Divider, Group, ScrollArea, Stack, Text } from '@mantine/core';
-import { EChartsOption, color } from "echarts";
+import React from 'react';
-import EChartsReact from "echarts-for-react";
+import { IDataReportDivision } from '../lib/type_division';
-import { useShallowEffect } from '@mantine/hooks';
+import _ from 'lodash';
-import * as echarts from 'echarts';
+import { useRouter } from 'next/navigation';
-import { Box } from '@mantine/core';
-import { WARNA } from '@/module/_global';
 
-export default function EventReport() {
+export default function EventReport({ data, tgl }: { data: IDataReportDivision[], tgl: string }) {
-  const [options, setOptions] = useState<EChartsOption>({});
+  const router = useRouter()
-
-  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);
-  }
 
   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>
   );
 }

src/module/division_new/ui/report_division_id.tsx

@@ -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"
+            label="Tanggal"
-            placeholder="Date input"
+            placeholder="Tanggal"
           />
-          <Box pt={10}>
+          {
-            <Box
+            tampil &&
-              bg={"white"}
+            <>
-              style={{
+              {
-                border: `1px solid ${WARNA.borderBiruMuda}`,
+                loading ?
-                borderRadius: 10,
+                  <>
-                padding: 10,
+                    <Box pb={20}>
-              }}
+                      <Skeleton width={"100%"} height={200} radius={"md"} />
-            >
+                    </Box>
-              <EchartPaiReport />
+                    {
-            </Box>
+                      Array(2)
-          </Box>
+                        .fill(null)
-          <Box pt={10}>
+                        .map((_, i) => (
-            <Box
+                          <Box key={i} mb={0}>
-              bg={"white"}
+                            <Skeleton height={100} width={"100%"} radius={"md"} />
-              style={{
+                          </Box>
-                border: `1px solid ${WARNA.borderBiruMuda}`,
+                        ))
-                borderRadius: 10,
+                    }
-                padding: 10,
+                  </>
-              }}
+                  :
-            >
+                  <>
-              <EchartBarReport />
+                    <Box pt={10}>
-            </Box>
+                      <Box
-          </Box>
+                        bg={"white"}
-          <Box pt={10}>
+                        style={{
-            <Box
+                          border: `1px solid ${WARNA.borderBiruMuda}`,
-              bg={"white"}
+                          borderRadius: 10,
-              style={{
+                          padding: 10,
-                border: `1px solid ${WARNA.borderBiruMuda}`,
+                        }}
-                borderRadius: 10,
+                      >
-                padding: 10,
+                        <EchartPaiReport data={report.progress} />
-              }}
+                      </Box>
-            >
+                    </Box>
-              <EventReport />
+                    <Box pt={10}>
-            </Box>
+                      <Box
-          </Box>
+                        bg={"white"}
-          {/* <Box pt={10}>
+                        style={{
-            <Box
+                          border: `1px solid ${WARNA.borderBiruMuda}`,
-              bg={"white"}
+                          borderRadius: 10,
-              style={{
+                          padding: 10,
-                border: `1px solid ${WARNA.borderBiruMuda}`,
+                        }}
-                borderRadius: 10,
+                      >
-                padding: 10,
+                        <EchartBarReport data={report.dokumen} />
-              }}
+                      </Box>
-            >
+                    </Box>
-              <DiscussionReport />
+                    <Box pt={10}>
-            </Box>
+                      <Box
-          </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>

src/module/home/ui/chart_document.tsx

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