rev: report divisi

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

nb: blm selesai report divisi

No Issues

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) {
-    if (val != null && val != "") {
-      onReport(val)
+  async function onReportTable(awal: any, akhir: any) {
+    try {
+      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"
-            placeholder="Tanggal"
+            label="Tanggal Awal"
+            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>
   );
 }
-