upd: report divisi

Deskripsi:
- report semua divisi
- report 1 divisi

No Issues

src/module/division_new/ui/event_report.tsx

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