rev: report divisi

Deskripsi:
- table laporan tugas divisi
- api table laporan tugas divisi

nb: blm selesai report divisi

No Issues

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

@@ -1,6 +1,6 @@
 import { prisma } from "@/module/_global";
 import { funGetUserByCookies } from "@/module/auth";
-import _ from "lodash";
+import _, { ceil } from "lodash";
 import moment from "moment";
 import { NextResponse } from "next/server";
 
@@ -11,6 +11,8 @@ export async function GET(request: Request) {
       const idGroup = searchParams.get("group")
       const division = searchParams.get("division")
       const date = searchParams.get("date")
+      const dateAkhir = searchParams.get("date-end")
+      const kat = searchParams.get("cat")
       let grup
 
       if (user.id == undefined) {
@@ -23,178 +25,246 @@ export async function GET(request: Request) {
          grup = idGroup
       }
 
-      // CHART PROGRESS
+      if (kat == "table-progress") {
-      let kondisiProgress
+         let kondisiProgress
-      if (division == "undefined") {
+         const dateStart = date
-         kondisiProgress = {
+         const dateEnd = dateAkhir
-            isActive: true,
+         if (division == "undefined") {
-            updatedAt: {
+            kondisiProgress = {
-               lte: new Date(String(date))
+               isActive: true,
-            },
+               Division: {
-            Division: {
+                  idGroup: String(grup)
-               idGroup: String(grup)
+               },
-            }
+               DivisionProjectTask: {
-         }
+                  some: {
-      } else {
+                     dateStart: {
-         kondisiProgress = {
+                        gte: new Date(String(dateStart))
-            isActive: true,
+                     },
-            idDivision: String(division),
+                     dateEnd: {
-            updatedAt: {
+                        lte: new Date(String(dateEnd))
-               lte: new Date(String(date))
+                     }
-            },
+                  }
-         }
+               }
-      }
+            }
-
+
-      const data = await prisma.divisionProject.groupBy({
+         } else {
-         where: kondisiProgress,
+            kondisiProgress = {
-         by: ["status"],
+               isActive: true,
-         _count: true
+               idDivision: String(division),
-      })
+               DivisionProjectTask: {
-
+                  some: {
-      const dataStatus = [{ name: 'Segera dikerjakan', status: 0 }, { name: 'Dikerjakan', status: 1 }, { name: 'Selesai dikerjakan', status: 2 }, { name: 'Dibatalkan', status: 3 }]
+                     dateStart: {
-      const hasilProgres: any[] = []
+                        gte: new Date(String(dateStart))
-      let input
+                     },
-      for (let index = 0; index < dataStatus.length; index++) {
+                     dateEnd: {
-         const cek = data.some((i: any) => i.status == dataStatus[index].status)
+                        lte: new Date(String(dateEnd))
-         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 fix = find != "100.00" ? find.substr(-2, 2) == "00" ? find.substr(0, 2) : find : "100"
-            input = {
-               name: dataStatus[index].name,
-               value: fix
-            }
-         } 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(grup)
-            },
-            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(grup)
-            },
-            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 = {
+         const data = await prisma.divisionProject.findMany({
-         progress: hasilProgres,
+            where: kondisiProgress,
-         dokumen: hasilDokumen,
+            select: {
-         event: hasilEvent
+               id: true,
+               title: true,
+               status: true,
+               DivisionProjectTask: {
+                  where: {
+                     isActive: true
+                  },
+                  select: {
+                     title: true,
+                     status: true
+                  }
+               }
+            }
+         })
+
+         const dataFix = data.map((v: any) => ({
+            ..._.omit(v, ["DivisionProjectTask"]),
+            progress: ceil((v.DivisionProjectTask.filter((i: any) => i.status == 1).length * 100) / v.DivisionProjectTask.length),
+         }))
+
+         return NextResponse.json({ success: true, message: "Berhasil mendapatkan data", data: dataFix }, { status: 200 });
+
+      } else {
+         // CHART PROGRESS
+         let kondisiProgress
+         if (division == "undefined") {
+            kondisiProgress = {
+               isActive: true,
+               updatedAt: {
+                  lte: new Date(String(date))
+               },
+               Division: {
+                  idGroup: String(grup)
+               }
+            }
+         } 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', status: 0 }, { name: 'Dikerjakan', status: 1 }, { name: 'Selesai', 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)
+               const fix = find != "100.00" ? find.substr(-2, 2) == "00" ? find.substr(0, 2) : find : "100"
+               input = {
+                  name: dataStatus[index].name,
+                  value: fix
+               }
+            } 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(grup)
+               },
+               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(grup)
+               },
+               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 });
       }
 
-      return NextResponse.json({ success: true, message: "Berhasil mendapatkan data", data: allData }, { status: 200 });
 
    }
    catch (error) {

src/module/division_new/ui/report_division_id.tsx

@@ -1,11 +1,12 @@
 "use client"
 import { LayoutNavbarNew, TEMA } from '@/module/_global';
 import { useHookstate } from '@hookstate/core';
-import { Box, Skeleton, Stack } from '@mantine/core';
+import { Badge, Box, Skeleton, Stack, Table } from '@mantine/core';
 import { DateInput } from '@mantine/dates';
+import _ from 'lodash';
 import moment from 'moment';
 import "moment/locale/id";
-import { useParams } from 'next/navigation';
+import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import toast from 'react-hot-toast';
 import { funGetReportDivision } from '../lib/api_division';
@@ -16,15 +17,24 @@ import EventReport from './event_report';
 
 export default function ReportDivisionId() {
   const [value, setValue] = useState<Date | null>(null);
+  const [valueAkhir, setValueAkhir] = useState<Date | null>(null);
   const param = useParams<{ id: string }>()
   const [loading, setLoading] = useState(false);
+  const [loadingTable, setLoadingTable] = useState(false);
   const [tampil, setTampil] = useState(false);
   const tema = useHookstate(TEMA)
+  const router = useRouter()
   const [report, setReport] = useState({
     progress: [],
     dokumen: [],
     event: [],
   })
+  const [reportTable, setReportTable] = useState<any[]>([])
+
+  const [touched, setTouched] = useState({
+    start_date: false,
+    end_date: false
+  })
 
   async function onReport(date: any) {
     try {
@@ -49,11 +59,48 @@ export default function ReportDivisionId() {
     }
   }
 
-  function onChangeDate(val: any) {
+  async function onReportTable(awal: any, akhir: any) {
-    if (val != null && val != "") {
+    try {
-      onReport(val)
+      setLoadingTable(true)
+      const res = await funGetReportDivision(`?cat=table-progress&division=${param.id}&date=${moment(awal).format("YYYY-MM-DD")}&date-end=${moment(akhir).format("YYYY-MM-DD")}`)
+      if (res.success) {
+        setReportTable(res.data)
+      } else {
+        toast.error(res.message)
+      }
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setLoadingTable(false)
+    }
+  }
+
+  function onChangeDate(val: any, kat: string) {
+    if (kat == "start-date") {
+      setValue(val)
+      if (valueAkhir != null && valueAkhir != undefined) {
+        if (val >= valueAkhir) {
+          setTouched({ ...touched, end_date: true })
+          setTampil(false)
+        } else {
+          setTouched({ ...touched, end_date: false })
+          onReport(val)
+          onReportTable(val, valueAkhir)
+        }
+      }
+    } else if (kat == "end-date") {
+      setValueAkhir(val)
+      if (value != null && value != undefined) {
+        if (value >= val) {
+          setTouched({ ...touched, end_date: true })
+          setTampil(false)
+        } else {
+          setTouched({ ...touched, end_date: false })
+          onReport(val)
+          onReportTable(value, val)
+        }
+      }
     }
-    setValue(val)
   }
 
 
@@ -65,12 +112,23 @@ export default function ReportDivisionId() {
           <DateInput
             valueFormat='DD-MM-YYYY'
             value={value}
-            onChange={(val) => { onChangeDate(val) }}
+            onChange={(val) => { onChangeDate(val, 'start-date') }}
             radius={10}
             size="md"
             required
-            label="Tanggal"
+            label="Tanggal Awal"
-            placeholder="Tanggal"
+            placeholder="Tanggal Awal"
+          />
+          <DateInput
+            valueFormat='DD-MM-YYYY'
+            value={valueAkhir}
+            onChange={(val) => { onChangeDate(val, 'end-date') }}
+            radius={10}
+            size="md"
+            required
+            label="Tanggal Akhir"
+            placeholder="Tanggal Akhir"
+            error={touched.end_date && "Tanggal akhir harus lebih besar dari tanggal awal"}
           />
           {
             tampil &&
@@ -103,6 +161,53 @@ export default function ReportDivisionId() {
                         }}
                       >
                         <EchartPaiReport data={report.progress} />
+                        {
+                          !loadingTable ?
+                            <Table highlightOnHover striped withTableBorder mt={50}>
+                              <Table.Tr>
+                                <Table.Th>Tugas</Table.Th>
+                                <Table.Th>Progres</Table.Th>
+                                <Table.Th>Status</Table.Th>
+                              </Table.Tr>
+                              {
+                                reportTable.length == 0 ?
+                                  <Table.Tr>
+                                    <Table.Td colSpan={3} ta={"center"}>Data kosong</Table.Td>
+                                  </Table.Tr>
+                                  :
+                                  reportTable.map((item: any, i: number) => {
+                                    return (
+                                      <Table.Tr key={i} onClick={() => { router.push(`/division/${param.id}/task/${item.id}`) }}>
+                                        <Table.Td>{item.title}</Table.Td>
+                                        <Table.Td>
+                                          {_.isNull(item.progress) ? 0 : item.progress}%
+                                        </Table.Td>
+                                        <Table.Td>
+                                          <Badge size="xs" color={
+                                            item.status === 0 ? '#5470c6' :
+                                              item.status === 2 ? '#fac858' :
+                                                item.status === 1 ? '#92cc76' :
+                                                  item.status === 3 ? '#ef6666' :
+                                                    "grey"
+                                          }>
+                                            {
+                                              item.status === 0 ? 'Segera' :
+                                                item.status === 1 ? 'Dikerjakan' :
+                                                  item.status === 2 ? 'Selesai' :
+                                                    item.status === 3 ? 'Dibatalkan' :
+                                                      "Segera"
+                                            }
+                                          </Badge>
+                                        </Table.Td>
+                                      </Table.Tr>
+                                    )
+                                  })
+                              }
+
+                            </Table>
+                            : <></>
+                        }
+
                       </Box>
                     </Box>
                     <Box pt={10}>
@@ -139,4 +244,3 @@ export default function ReportDivisionId() {
     </Box>
   );
 }
-