style : update report

src/module/division_new/components/create_report.tsx

@@ -1,10 +1,12 @@
-"use client"
+"use client";
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, WARNA } from "@/module/_global";
-import { Box, Select, Stack } from '@mantine/core';
+import { Box, Select, Stack, Text } from "@mantine/core";
-import { DateInput } from '@mantine/dates';
+import { DateInput } from "@mantine/dates";
-import React, { useState } from 'react';
+import React, { useState } from "react";
-import EchartPaiReport from './echart_pai_report';
+import EchartPaiReport from "./echart_pai_report";
-import EchartBarReport from './echart_bar_report';
+import EchartBarReport from "./echart_bar_report";
+import EventReport from "./event_report";
+import DiscussionReport from "./discussion_report";
 
 export default function CreateReport() {
   const [value, setValue] = useState<Date | null>(null);
@@ -30,28 +32,55 @@ export default function CreateReport() {
             placeholder="Date input"
           />
           <Box pt={10}>
-            <Box bg={'white'} style={{
+            <Box
-              border: `1px solid ${WARNA.borderBiruMuda}`,
+              bg={"white"}
-              borderRadius: 10,
+              style={{
-              padding: 10
+                border: `1px solid ${WARNA.borderBiruMuda}`,
-            }}>
+                borderRadius: 10,
+                padding: 10,
+              }}
+            >
               <EchartPaiReport />
             </Box>
           </Box>
           <Box pt={10}>
-            <Box bg={'white'} style={{
+            <Box
-              border: `1px solid ${WARNA.borderBiruMuda}`,
+              bg={"white"}
-              borderRadius: 10,
+              style={{
-              padding: 10
+                border: `1px solid ${WARNA.borderBiruMuda}`,
-            }}>
+                borderRadius: 10,
+                padding: 10,
+              }}
+            >
               <EchartBarReport />
             </Box>
-
           </Box>
-
+          <Box pt={10}>
+            <Box
+              bg={"white"}
+              style={{
+                border: `1px solid ${WARNA.borderBiruMuda}`,
+                borderRadius: 10,
+                padding: 10,
+              }}
+            >
+              <EventReport />
+            </Box>
+          </Box>
+          <Box pt={10}>
+            <Box
+              bg={"white"}
+              style={{
+                border: `1px solid ${WARNA.borderBiruMuda}`,
+                borderRadius: 10,
+                padding: 10,
+              }}
+            >
+              <DiscussionReport />
+            </Box>
+          </Box>
         </Stack>
       </Box>
     </Box>
   );
 }
-

src/module/division_new/components/discussion_report.tsx

@@ -0,0 +1,67 @@
+import { WARNA } from "@/module/_global";
+import { Box, Group, Text } from "@mantine/core";
+import { GoDiscussionClosed } from "react-icons/go";
+import { CiClock2, CiUser } from "react-icons/ci";
+
+const dataDiskusi = [
+    {
+        id: 1,
+        judul: 'Mengatasi Limbah Makanan ',
+        user: 'Fibra Marcell',
+        date: '21 Juni 2024'
+    },
+    {
+        id: 2,
+        judul: 'Pentingnya Menjaga Kelestarian Hutan ',
+        user: 'Bayu Tegar',
+        date: '15 Juni 2024'
+    },
+    {
+        id: 3,
+        judul: 'Mengatasi Limbah Industri ',
+        user: 'Nian Putri',
+        date: '11 Mei 2024'
+    },
+    {
+        id: 4,
+        judul: 'Manfaat Sampah Plastik',
+        user: 'Budi Prasetyo',
+        date: '10 Mei 2024'
+    },
+]
+export default function DiscussionReport() {
+    return (
+        <Box pt={10}>
+            <Text ta={"center"} mb={20} fw={'bold'}>DISKUSI</Text>
+            {dataDiskusi.map((v, i) => {
+                return (
+                    <Box key={i} m={10}>
+                        <Box style={{
+                            borderRadius: 10,
+                            border: `1px solid ${"#D6D8F6"}`,
+                            padding: 15
+                        }} mb={10}>
+                            <Group align="center">
+                                <GoDiscussionClosed size={25} />
+                                <Box w={{ base: 230, md: 400 }}>
+                                    <Text truncate="end" fw={'bold'}>{v.judul}</Text>
+                                </Box>
+                            </Group>
+                            <Group justify="space-between" align="center" mt={20} c={'#8C8C8C'}>
+                                <Group gap={5} align="center">
+                                    <CiUser size={18} />
+                                    <Text fz={13}>{v.user}</Text>
+                                </Group>
+                                <Group gap={5} align="center">
+                                    <CiClock2 size={18} />
+                                    <Text fz={13}>{v.date}</Text>
+                                </Group>
+                            </Group>
+                        </Box>
+                    </Box>
+                )
+            })
+            }
+        </Box>
+    )
+}

src/module/division_new/components/echart_bar_report.tsx

@@ -16,9 +16,11 @@ export default function EchartBarReport() {
   const loadData = () => {
     const option: EChartsOption = {
       title: {
-        text: "SENTIMENT ANALYSIS",
+        text: "DOKUMEN",
+        top: '2%',
+        left: 'center',
         textStyle: {
-          color: "white"
+          color: WARNA.biruTua
         }
       },
       tooltip: {

src/module/division_new/components/echart_pai_report.tsx

@@ -30,7 +30,7 @@ export default function EchartPaiReport() {
         {
           name: 'Progres Tugas',
           type: 'pie',
-          radius: '80%',
+          radius: '70%',
           avoidLabelOverlap: false,
           itemStyle: {
             borderRadius: 2,

src/module/division_new/components/event_report.tsx

@@ -0,0 +1,62 @@
+import { Box, Divider, Group, ScrollArea, Stack, Text } from '@mantine/core';
+import React from 'react';
+
+const dataEvent = [
+  {
+    id: 1,
+    title: 'Pembahasan Mengenai Darmasaba',
+    jamAwal: "10.00",
+    jamAkhir: "11.00",
+    dibuat: "Jhon"
+  },
+  {
+    id: 2,
+    title: 'Pembahasan Mengenai Darmasaba',
+    jamAwal: "11.00",
+    jamAkhir: "12.00",
+    dibuat: "Jhon"
+  },
+  {
+    id: 3,
+    title: 'Pembahasan Mengenai Darmasaba',
+    jamAwal: "13.00",
+    jamAkhir: "14.00",
+    dibuat: "Jhon"
+  },
+  {
+    id: 4,
+    title: 'Pembahasan Mengenai Darmasaba',
+    jamAwal: "15.00",
+    jamAkhir: "16.00",
+    dibuat: "Jhon"
+  },
+]
+
+export default function EventReport() {
+
+  return (
+    <Box>
+      <Text mb={20} mt={10} ta={'center'} fw={"bold"}>EVENT SELESAI DILAKSANAKAN</Text>
+      {dataEvent.map((event, index) => {
+        const bgColor = ['#D8D8F1', '#FED6C5'][index % 2]
+        const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
+        return (
+          <Box key={event.id} m={10}>
+            <Box bg={bgColor} pl={15} p={10} style={{
+              borderRadius: 10
+            }} h={113}>
+              <Group>
+                <Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
+                <Box>
+                  <Text>{event.jamAwal} - {event.jamAkhir}</Text>
+                  <Text fw={"bold"}>{event.title}</Text>
+                  <Text>Dibuat oleh : {event.dibuat}</Text>
+                </Box>
+              </Group>
+            </Box>
+          </Box>
+        )
+      })}
+    </Box>
+  );
+}

src/module/home/components/list_event.tsx

@@ -49,14 +49,16 @@ export default function ListEvent() {
                      }} mb={10}>
                         <Group>
                            <GoDiscussionClosed size={25} />
-                           <Text fw={'bold'}>{v.judul}</Text>
+                           <Box w={{ base: 230, md: 400 }}>
+                              <Text fw={'bold'}>{v.judul}</Text>
+                           </Box>
                         </Group>
-                        <Group justify="space-between" mt={10} c={'#8C8C8C'}>
+                        <Group justify="space-between" mt={20} c={'#8C8C8C'}>
-                           <Group>
+                           <Group gap={5} align="center">
                               <CiUser size={18} />
                               <Text fz={13}>{v.user}</Text>
-                           </Group>
+                           </Group >
-                           <Group>
+                           <Group gap={5} align="center">
                               <CiClock2 size={18} />
                               <Text fz={13}>{v.date}</Text>
                            </Group>