Merge pull request #373 from bipproduction/amalia/10-jan-25

Amalia/10 jan 25

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

@@ -27,8 +27,6 @@ export async function GET(request: Request) {
 
       if (kat == "table-progress") {
          let kondisiProgress
-         const dateStart = date
-         const dateEnd = dateAkhir
          if (division == "undefined") {
             kondisiProgress = {
                isActive: true,
@@ -38,10 +36,10 @@ export async function GET(request: Request) {
                DivisionProjectTask: {
                   some: {
                      dateStart: {
-                        gte: new Date(String(dateStart))
+                        gte: new Date(String(date))
                      },
                      dateEnd: {
-                        lte: new Date(String(dateEnd))
+                        lte: new Date(String(dateAkhir))
                      }
                   }
                }
@@ -54,10 +52,10 @@ export async function GET(request: Request) {
                DivisionProjectTask: {
                   some: {
                      dateStart: {
-                        gte: new Date(String(dateStart))
+                        gte: new Date(String(date))
                      },
                      dateEnd: {
-                        lte: new Date(String(dateEnd))
+                        lte: new Date(String(dateAkhir))
                      }
                   }
                }
@@ -96,20 +94,34 @@ export async function GET(request: Request) {
          if (division == "undefined") {
             kondisiProgress = {
                isActive: true,
-               updatedAt: {
-                  lte: new Date(String(date))
-               },
                Division: {
                   idGroup: String(grup)
+               },
+               DivisionProjectTask: {
+                  some: {
+                     dateStart: {
+                        gte: new Date(String(date))
+                     },
+                     dateEnd: {
+                        lte: new Date(String(dateAkhir))
+                     }
+                  }
                }
             }
          } else {
             kondisiProgress = {
                isActive: true,
                idDivision: String(division),
-               updatedAt: {
+               DivisionProjectTask: {
-                  lte: new Date(String(date))
+                  some: {
-               },
+                     dateStart: {
+                        gte: new Date(String(date))
+                     },
+                     dateEnd: {
+                        lte: new Date(String(dateAkhir))
+                     }
+                  }
+               }
             }
          }
 
@@ -153,7 +165,8 @@ export async function GET(request: Request) {
                   idGroup: String(grup)
                },
                createdAt: {
-                  lte: new Date(String(date))
+                  gte: new Date(String(date)),
+                  lte: new Date(String(dateAkhir))
                },
             }
          } else {
@@ -162,7 +175,8 @@ export async function GET(request: Request) {
                category: 'FILE',
                idDivision: String(division),
                createdAt: {
-                  lte: new Date(String(date))
+                  gte: new Date(String(date)),
+                  lte: new Date(String(dateAkhir))
                },
             }
          }
@@ -207,53 +221,142 @@ export async function GET(request: Request) {
 
 
          // CHART EVENT
-         let kondisiEvent
+         let kondisiEvent, kondisiSelesai, kondisiComingSoon
          if (division == "undefined") {
-            kondisiEvent = {
+            // kondisiEvent = {
+            //    isActive: true,
+            //    Division: {
+            //       idGroup: String(grup)
+            //    },
+            //    DivisionCalendarReminder: {
+            //       some: {
+            //          dateStart: {
+            //             gte: new Date(String(date)),
+            //             lte: new Date(String(dateAkhir))
+            //          }
+            //       }
+            //    }
+            // }
+
+            kondisiSelesai = {
                isActive: true,
                Division: {
                   idGroup: String(grup)
                },
-               dateStart: new Date(String(date))
+               DivisionCalendarReminder: {
+                  some: {
+                     dateStart: {
+                        gte: new Date(String(date)),
+                        lte: new Date()
+                     }
+                  }
+               }
+            }
+
+            kondisiComingSoon = {
+               isActive: true,
+               Division: {
+                  idGroup: String(grup)
+               },
+               DivisionCalendarReminder: {
+                  some: {
+                     dateStart: {
+                        gt: new Date(),
+                        lte: new Date(String(dateAkhir))
+                     }
+                  }
+               }
             }
          } else {
-            kondisiEvent = {
+            // kondisiEvent = {
+            //    isActive: true,
+            //    idDivision: String(division),
+            //    DivisionCalendarReminder: {
+            //       some: {
+            //          dateStart: {
+            //             gte: new Date(String(date)),
+            //             lte: new Date(String(dateAkhir))
+            //          }
+            //       }
+            //    }
+            // }
+
+            kondisiSelesai = {
                isActive: true,
                idDivision: String(division),
-               dateStart: new Date(String(date))
+               DivisionCalendarReminder: {
+                  some: {
+                     dateStart: {
+                        gte: new Date(String(date)),
+                        lte: new Date()
+                     }
+                  }
+               }
+            }
+
+            kondisiComingSoon = {
+               isActive: true,
+               idDivision: String(division),
+               DivisionCalendarReminder: {
+                  some: {
+                     dateStart: {
+                        gt: new Date(),
+                        lte: new Date(String(dateAkhir))
+                     }
+                  }
+               }
             }
          }
 
-         const dataEvent = await prisma.divisionCalendar.findMany({
+         const eventSelesai = await prisma.divisionCalendar.count({
-            where: kondisiEvent,
+            where: kondisiSelesai
-            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) => ({
+         const eventComingSoon = await prisma.divisionCalendar.count({
-            ..._.omit(v, ["User"]),
+            where: kondisiComingSoon
-            user_name: v.User.name,
+         })
-            timeStart: moment.utc(v.timeStart).format('HH:mm'),
+
-            timeEnd: moment.utc(v.timeEnd).format('HH:mm')
+         const hasilEvent = [
-         }))
+            {
+               name: 'Selesai',
+               value: eventSelesai
+            },
+            {
+               name: 'Akan Datang',
+               value: eventComingSoon
+            }
+         ]
+
+         // 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 = {

src/module/division_new/ui/create_report.tsx

@@ -2,7 +2,7 @@
 import { globalRole, LayoutNavbarNew, TEMA } from "@/module/_global";
 import { funGetAllGroup, IDataGroup } from "@/module/group";
 import { useHookstate } from "@hookstate/core";
-import { Box, Select, Skeleton, Stack } from "@mantine/core";
+import { Badge, Box, Select, Skeleton, Stack, Table } from "@mantine/core";
 import { DateInput } from "@mantine/dates";
 import { useShallowEffect } from "@mantine/hooks";
 import moment from "moment";
@@ -13,21 +13,32 @@ import { funGetReportDivision } from "../lib/api_division";
 import EchartBarReport from "./echart_bar_report";
 import EchartPaiReport from "./echart_pai_report";
 import EventReport from "./event_report";
+import _ from "lodash";
+import router from "next/router";
+import EchartBarReportCalender from "./echart_bar_calender";
 
 export default function CreateReport() {
   const [value, setValue] = useState<Date | null>(null);
+  const [valueAkhir, setValueAkhir] = useState<Date | null>(null);
   const [dataGroup, setDataGroup] = useState<IDataGroup[]>([]);
   const [loading, setLoading] = useState(false);
+  const [loadingTable, setLoadingTable] = useState(false);
   const [tampil, setTampil] = useState(false);
   const [isGroup, setIsGroup] = useState("");
   const param = useParams<{ id: string }>()
   const tema = useHookstate(TEMA)
   const roleLogin = useHookstate(globalRole)
+  const [reportTable, setReportTable] = useState<any[]>([])
   const [report, setReport] = useState({
     progress: [],
     dokumen: [],
     event: [],
   })
+  const [touched, setTouched] = useState({
+    grup: false,
+    start_date: false,
+    end_date: false
+  })
 
   async function loadData() {
     const loadGroup = await funGetAllGroup('?active=true')
@@ -38,7 +49,7 @@ export default function CreateReport() {
     }
   }
 
-  async function onReport(group: string, date: any) {
+  async function onReport(group: string, awal: any, akhir: any) {
     try {
       setReport({
         progress: [],
@@ -47,7 +58,7 @@ export default function CreateReport() {
       })
       setTampil(true)
       setLoading(true)
-      const res = await funGetReportDivision(`?group=${group}&division=${param.id}&date=${moment(date).format("YYYY-MM-DD")}`)
+      const res = await funGetReportDivision(`?group=${group}&division=${param.id}&date=${moment(awal).format("YYYY-MM-DD")}&date-end=${moment(akhir).format("YYYY-MM-DD")}`)
       if (res.success) {
         setReport(res.data)
       } else {
@@ -61,36 +72,71 @@ export default function CreateReport() {
     }
   }
 
-  function onChooseGroup(val: any) {
+  async function onReportTable(group: string, awal: any, akhir: any) {
-    if (val != null && val != "" && value != null && value != undefined) {
+    try {
-      onReport(val, value)
+      setLoadingTable(true)
+      const res = await funGetReportDivision(`?cat=table-progress&group=${group}&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)
     }
-
-    if (val == null || val == "") {
-      setTampil(false)
-      toast.error("Error! harus memilih grup")
-    }
-    setIsGroup(String(val))
   }
 
-  function onChangeDate(val: any) {
 
-    if (roleLogin.get() == "supadmin") {
+  function onChangeDate(val: any, kat: string) {
-      if (val != null && val != "" && isGroup != "" && isGroup != "null") {
+    if (kat == "grup") {
-        onReport(isGroup, val)
+      setIsGroup(val)
-      }
+      if (val == null || val == "") {
-
-      if (isGroup == null || isGroup == "") {
         setTampil(false)
-        toast.error("Error! harus memilih grup")
+        setTouched({ ...touched, grup: true })
+      } else {
+        setIsGroup(String(val))
+        setTouched({ ...touched, grup: false })
+
+        if (value != null && value != undefined && valueAkhir != null && valueAkhir != undefined && !touched.end_date) {
+          onReport(String(val), value, valueAkhir)
+          onReportTable(String(val), value, valueAkhir)
+        }
       }
-    } else {
+    } else if (kat == "start-date") {
-      if (val != null && val != "") {
+      setValue(val)
-        onReport(isGroup, val)
+      if (valueAkhir != null && valueAkhir != undefined) {
+        if (val >= valueAkhir) {
+          setTouched({ ...touched, end_date: true })
+          setTampil(false)
+        } else {
+          setTouched({ ...touched, end_date: false })
+          if (roleLogin.get() == "supadmin" && (isGroup == "" || isGroup == null || isGroup == undefined)) {
+            setTampil(false)
+          } else {
+            onReport(isGroup, val, valueAkhir)
+            onReportTable(isGroup, 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 })
+          if (roleLogin.get() == "supadmin" && (isGroup == "" || isGroup == null || isGroup == undefined)) {
+            setTampil(false)
+          } else {
+            onReport(isGroup, value, val)
+            onReportTable(isGroup, value, val)
+          }
+        }
       }
     }
-
-    setValue(val)
   }
 
   useShallowEffect(() => {
@@ -113,19 +159,32 @@ export default function CreateReport() {
                 value: String(pro.id),
                 label: pro.name
               }))}
-              onChange={(val) => { onChooseGroup(val) }}
+              onChange={(val) => { onChangeDate(val, 'grup') }}
+              error={touched.grup && "Grup tidak boleh kosong"}
             />
           }
 
           <DateInput
-            valueFormat="DD-MM-YYYY"
+            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 &&
@@ -158,6 +217,52 @@ export default function CreateReport() {
                         }}
                       >
                         <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}>
@@ -181,7 +286,8 @@ export default function CreateReport() {
                           padding: 10,
                         }}
                       >
-                        <EventReport data={report.event} tgl={moment(value).format("DD MMMM YYYY")} />
+                        <EchartBarReportCalender data={report.event} />
+                        {/* <EventReport data={report.event} tgl={moment(value).format("DD MMMM YYYY")} /> */}
                       </Box>
                     </Box>
 

src/module/division_new/ui/echart_bar_calender.tsx

@@ -0,0 +1,93 @@
+import { TEMA, } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
+import { Box } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { EChartsOption } from "echarts";
+import EChartsReact from "echarts-for-react";
+import { useState } from 'react';
+
+export default function EchartBarReportCalender({ data }: { data: any }) {
+  const [options, setOptions] = useState<EChartsOption>({});
+  const color = ["#5971C0", "#868e96", "#9EC97F"]
+  const tema = useHookstate(TEMA)
+
+  useShallowEffect(() => {
+    loadData(data)
+  }, [data])
+
+  const loadData = (value: any) => {
+    const option: EChartsOption = {
+      title: {
+        text: "ACARA DIVISI",
+        top: '2%',
+        left: 'center',
+        textStyle: {
+          color: tema.get().utama
+        }
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        }
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+      },
+      xAxis: [
+        {
+          type: 'category',
+          data: value.map(({ name }: any) => name),
+          axisLabel: {
+            fontSize: 14
+          },
+          axisTick: {
+            alignWithLabel: true
+          },
+          axisLine: {
+            show: true,
+          },
+        }
+      ],
+      yAxis: [
+        {
+          type: 'value',
+          show: true,
+          splitLine: {
+            lineStyle: {
+              color: "gray",
+              opacity: 0.1
+            }
+          },
+        }
+      ],
+      series: [
+        {
+          name: 'Data',
+          type: 'bar',
+          barWidth: '70%',
+          data: value.map(
+            (v: any, i: any) =>
+            ({
+              name: v.name,
+              value: v.value,
+              itemStyle: {
+                color: color[i]
+              },
+            })
+          ),
+        }
+      ]
+    };
+    setOptions(option);
+  }
+
+  return (
+    <Box>
+      <EChartsReact style={{ height: 400, width: "auto" }} option={options} />
+    </Box>
+  );
+}

src/module/division_new/ui/echart_bar_report.tsx

@@ -1,11 +1,10 @@
-import React, { useState } from 'react';
+import { TEMA, } from '@/module/_global';
-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 { TEMA,  } from '@/module/_global';
 import { useHookstate } from '@hookstate/core';
+import { Box } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { EChartsOption } from "echarts";
+import EChartsReact from "echarts-for-react";
+import { useState } from 'react';
 
 export default function EchartBarReport({ data }: { data: any }) {
   const [options, setOptions] = useState<EChartsOption>({});

src/module/division_new/ui/report_division_id.tsx

@@ -13,6 +13,7 @@ import { funGetReportDivision } from '../lib/api_division';
 import EchartBarReport from './echart_bar_report';
 import EchartPaiReport from './echart_pai_report';
 import EventReport from './event_report';
+import EchartBarReportCalender from './echart_bar_calender';
 
 
 export default function ReportDivisionId() {
@@ -30,13 +31,12 @@ export default function ReportDivisionId() {
     event: [],
   })
   const [reportTable, setReportTable] = useState<any[]>([])
-
   const [touched, setTouched] = useState({
     start_date: false,
     end_date: false
   })
 
-  async function onReport(date: any) {
+  async function onReport(awal: any, akhir: any) {
     try {
       setReport({
         progress: [],
@@ -45,7 +45,7 @@ export default function ReportDivisionId() {
       })
       setTampil(true)
       setLoading(true)
-      const res = await funGetReportDivision(`?division=${param.id}&date=${moment(date).format("YYYY-MM-DD")}`)
+      const res = await funGetReportDivision(`?division=${param.id}&date=${moment(awal).format("YYYY-MM-DD")}&date-end=${moment(akhir).format("YYYY-MM-DD")}`)
       if (res.success) {
         setReport(res.data)
       } else {
@@ -84,7 +84,7 @@ export default function ReportDivisionId() {
           setTampil(false)
         } else {
           setTouched({ ...touched, end_date: false })
-          onReport(val)
+          onReport(val, valueAkhir)
           onReportTable(val, valueAkhir)
         }
       }
@@ -96,7 +96,7 @@ export default function ReportDivisionId() {
           setTampil(false)
         } else {
           setTouched({ ...touched, end_date: false })
-          onReport(val)
+          onReport(value, val)
           onReportTable(value, val)
         }
       }
@@ -231,7 +231,8 @@ export default function ReportDivisionId() {
                           padding: 10,
                         }}
                       >
-                        <EventReport data={report.event} tgl={moment(value).format("DD MMMM YYYY")} />
+                        <EchartBarReportCalender data={report.event} />
+                        {/* <EventReport data={report.event} tgl={moment(value).format("DD MMMM YYYY")} /> */}
                       </Box>
                     </Box>