style : update report

src/module/_global/fun/WARNA.ts

@@ -3,5 +3,6 @@ export const WARNA = {
     biruTua: "#19345E",
     bgIcon: "#384288",
     borderOrange: "#FCAA4B",
-    bgHijauMuda: "#DCEED8"
+    bgHijauMuda: "#DCEED8",
+    borderBiruMuda: "#9EBDED"
 }

src/module/division_new/components/create_report.tsx

@@ -1,8 +1,10 @@
 "use client"
-import { LayoutNavbarNew } from '@/module/_global';
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
 import { Box, Select, Stack } 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';
 
 export default function CreateReport() {
   const [value, setValue] = useState<Date | null>(null);
@@ -27,6 +29,26 @@ export default function CreateReport() {
             label="Date input"
             placeholder="Date input"
           />
+          <Box pt={10}>
+            <Box bg={'white'} style={{
+              border: `1px solid ${WARNA.borderBiruMuda}`,
+              borderRadius: 10,
+              padding: 10
+            }}>
+              <EchartPaiReport />
+            </Box>
+          </Box>
+          <Box pt={10}>
+            <Box bg={'white'} style={{
+              border: `1px solid ${WARNA.borderBiruMuda}`,
+              borderRadius: 10,
+              padding: 10
+            }}>
+              <EchartBarReport />
+            </Box>
+
+          </Box>
+
         </Stack>
       </Box>
     </Box>

src/module/division_new/components/echart_bar_report.tsx

@@ -0,0 +1,103 @@
+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';
+
+export default function EchartBarReport() {
+  const [options, setOptions] = useState<EChartsOption>({});
+
+  useShallowEffect(() => {
+    loadData()
+  }, [])
+
+  const loadData = () => {
+    const option: EChartsOption = {
+      title: {
+        text: "SENTIMENT ANALYSIS",
+        textStyle: {
+          color: "white"
+        }
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        }
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+      },
+      xAxis: [
+        {
+          type: 'category',
+          data: ['File', 'Folder', 'Documen'],
+          axisLabel: {
+            fontSize: 14
+          },
+          axisTick: {
+            alignWithLabel: true
+          },
+          axisLine: {
+            show: true,
+          },
+        }
+      ],
+      yAxis: [
+        {
+          type: 'value',
+          show: true,
+          splitLine: {
+            lineStyle: {
+              color: "gray",
+              opacity: 0.1
+            }
+          },
+        }
+      ],
+      series: [
+        {
+          name: 'Direct',
+          type: 'bar',
+          barWidth: '70%',
+          data: [
+            {
+              value: 78,
+              name: 'Confidence',
+              itemStyle: {
+                color: "#F3C96B"
+              }
+            },
+            {
+              value: 35,
+              name: 'Supportive',
+              itemStyle: {
+                color: "#9EC97F"
+              }
+            },
+            {
+              value: 58,
+              name: 'Positive',
+              itemStyle: {
+                color: "#5971C0"
+              }
+            },
+
+          ],
+        }
+      ]
+    };
+    setOptions(option);
+  }
+
+  return (
+    <Box>
+      <EChartsReact style={{ height: 400, width: "auto" }} option={options} />
+    </Box>
+  );
+}

src/module/division_new/components/echart_pai_report.tsx

@@ -0,0 +1,69 @@
+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';
+
+export default function EchartPaiReport() {
+  const [options, setOptions] = useState<EChartsOption>({});
+
+  useShallowEffect(() => {
+    loadData()
+  }, [])
+
+  const loadData = () => {
+    const option: EChartsOption = {
+      title: {
+        text: "PROGRES TUGAS",
+        top: '2%',
+        left: 'center',
+        textStyle: {
+          color: WARNA.biruTua
+        }
+      },
+      legend: {
+        top: 'bottom',
+      },
+      series: [
+        {
+          name: 'Progres Tugas',
+          type: 'pie',
+          radius: '80%',
+          avoidLabelOverlap: false,
+          itemStyle: {
+            borderRadius: 2,
+            borderWidth: 2
+          },
+          label: {
+            position: "inner",
+            formatter: (a) => {
+              return `${a.value + "%"}`;
+            },
+          },
+          data: [
+            { value: 25, name: 'Dikerjakan' },
+            { value: 35, name: 'Selesai dikerjakan' },
+            { value: 10, name: 'Segera dikerjakan' },
+            { value: 30, name: 'Batal dikerjakan' },
+          ],
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            }
+          }
+        }
+      ]
+    }
+    setOptions(option);
+  }
+
+  return (
+    <Box>
+      <EChartsReact style={{ height: 400, width: "auto" }} option={options} />
+    </Box>
+  );
+}

src/module/division_new/components/ui/navbar_create_users.tsx

@@ -78,11 +78,11 @@ export default function NavbarCreateUsers() {
               {dataUser.map((v, index) => {
                 const isSelected = selectedFiles[index];
                 return (
-                  <Box key={index} mb={20}>
+                  <Box key={index} mb={10}>
                     <Box
-
+                      bg={isSelected ? WARNA.bgHijauMuda : "white"}
                       style={{
-                        border: `${isSelected ? "2px solid #FFC107" : `1px solid ${WARNA.biruTua}`}`,
+                        border: `1px solid ${WARNA.biruTua}`,
                         borderRadius: 20,
                       }}
                       py={10}