upd: home

Deskripsi:
- nambah chart progres tugas, chart dokumen,dan event hari ini pada home page

No Issues

src/module/home/components/chart_document.tsx

@@ -0,0 +1,113 @@
+'use client'
+import { WARNA } from "@/module/_global";
+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 ChartDocumentHome() {
+   const [options, setOptions] = useState<EChartsOption>({});
+
+   useShallowEffect(() => {
+      loadData()
+   }, [])
+
+   const loadData = () => {
+      const option: EChartsOption = {
+         title: {
+            text: "DOKUMEN",
+            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: ['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 pt={10}>
+         <Box bg={"white"} style={{
+            borderRadius: 10,
+            border: `1px solid ${"#D6D8F6"}`,
+            padding: 20
+         }}>
+            <Box>
+               <EChartsReact style={{ height: 400, width: "auto" }} option={options} />
+            </Box>
+         </Box>
+      </Box>
+   );
+}

src/module/home/components/chart_progress_tugas.tsx

@@ -0,0 +1,77 @@
+'use client'
+import { WARNA } from "@/module/_global";
+import { Box, Text } 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 ChartProgressHome() {
+   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: '70%',
+               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 pt={10}>
+         <Box bg={"white"} style={{
+            borderRadius: 10,
+            border: `1px solid ${"#D6D8F6"}`,
+            padding: 20
+         }}>
+            <Box>
+               <EChartsReact style={{ height: 400, width: "auto" }} option={options} />
+            </Box>
+         </Box>
+      </Box>
+   )
+}

src/module/home/components/list_discussion.tsx

@@ -0,0 +1,73 @@
+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 ListDiscussion() {
+   return (
+      <Box pt={10}>
+         <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Diskusi</Text>
+         <Box bg={"white"} style={{
+            borderRadius: 10,
+            border: `1px solid ${"#D6D8F6"}`,
+            padding: 20
+         }}>
+            {
+               dataDiskusi.map((v, i) => {
+                  return (
+                     <Box key={i} style={{
+                        borderRadius: 10,
+                        border: `1px solid ${"#D6D8F6"}`,
+                        padding: 10
+                     }} mb={10}>
+                        <Group>
+                           <GoDiscussionClosed size={25} />
+                           <Box w={{ base: 230, md: 400 }}>
+                              <Text fw={'bold'}>{v.judul}</Text>
+                           </Box>
+                        </Group>
+                        <Group justify="space-between" 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/home/components/list_event.tsx

@@ -1,72 +1,66 @@
-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";
+import { WARNA } from "@/module/_global"
+import { Box, Divider, Group, Text } from "@mantine/core"
 
-const dataDiskusi = [
+const dataEvent = [
    {
       id: 1,
-      judul: 'Mengatasi Limbah Makanan ',
-      user: 'Fibra Marcell',
-      date: '21 Juni 2024'
+      title: 'Pembahasan Mengenai Darmasaba',
+      jamAwal: "10.00",
+      jamAkhir: "11.00",
+      dibuat: "Jhon"
    },
    {
       id: 2,
-      judul: 'Pentingnya Menjaga Kelestarian Hutan ',
-      user: 'Bayu Tegar',
-      date: '15 Juni 2024'
+      title: 'Pembahasan Mengenai Darmasaba',
+      jamAwal: "11.00",
+      jamAkhir: "12.00",
+      dibuat: "Jhon"
    },
    {
       id: 3,
-      judul: 'Mengatasi Limbah Industri ',
-      user: 'Nian Putri',
-      date: '11 Mei 2024'
+      title: 'Pembahasan Mengenai Darmasaba',
+      jamAwal: "13.00",
+      jamAkhir: "14.00",
+      dibuat: "Jhon"
    },
    {
       id: 4,
-      judul: 'Manfaat Sampah Plastik',
-      user: 'Budi Prasetyo',
-      date: '10 Mei 2024'
+      title: 'Pembahasan Mengenai Darmasaba',
+      jamAwal: "15.00",
+      jamAkhir: "16.00",
+      dibuat: "Jhon"
    },
 ]
 
-export default function ListEvent() {
+export default function ListEventHome() {
    return (
       <Box pt={10}>
-         <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Diskusi</Text>
+         <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Event Hari Ini</Text>
          <Box bg={"white"} style={{
             borderRadius: 10,
             border: `1px solid ${"#D6D8F6"}`,
             padding: 20
          }}>
-            {
-               dataDiskusi.map((v, i) => {
-                  return (
-                     <Box key={i} style={{
-                        borderRadius: 10,
-                        border: `1px solid ${"#D6D8F6"}`,
-                        padding: 10
-                     }} mb={10}>
+            {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>
-                           <GoDiscussionClosed size={25} />
-                           <Box w={{ base: 230, md: 400 }}>
-                              <Text fw={'bold'}>{v.judul}</Text>
+                           <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>
-                        <Group justify="space-between" 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>
       </Box>
    )

src/module/home/view/view_home.tsx

@@ -6,7 +6,10 @@ import Features from '../components/features';
 import IconNavbar from '../components/ui/icon_navbar';
 import ListProjects from '../components/list_project';
 import ListDivisi from '../components/list_divisi';
-import ListEvent from '../components/list_event';
+import ListDiscussion from '../components/list_discussion';
+import ListEventHome from '../components/list_event';
+import ChartProgressHome from '../components/chart_progress_tugas';
+import ChartDocumentHome from '../components/chart_document';
 
 
 export default function ViewHome() {
@@ -24,7 +27,10 @@ export default function ViewHome() {
           <Features />
           <ListProjects />
           <ListDivisi />
-          <ListEvent />
+          <ChartProgressHome />
+          <ChartDocumentHome />
+          <ListEventHome />
+          <ListDiscussion />
         </Stack>
       </Box>