Merge pull request #48 from bipproduction/amalia/15-jul-24

Amalia/15 jul 24

src/app/(application)/(detail-division)/discussion/[id]/page.tsx

@@ -0,0 +1,9 @@
+import { ViewDetailDiscussion } from "@/module/division_new"
+
+function Page() {
+   return (
+      <ViewDetailDiscussion />
+   )
+}
+
+export default Page

src/app/(application)/(detail-division)/discussion/create/page.tsx

@@ -0,0 +1,9 @@
+import { ViewCreateDiscussion } from "@/module/division_new";
+
+function Page() {
+   return (
+      <ViewCreateDiscussion />
+   )
+}
+
+export default Page;

src/app/(application)/(detail-division)/discussion/edit/[id]/page.tsx

@@ -0,0 +1,9 @@
+import { ViewEditDiscussion } from "@/module/division_new";
+
+function Page() {
+   return (
+      <ViewEditDiscussion />
+   )
+}
+
+export default Page;

src/app/(application)/(detail-division)/discussion/page.tsx

@@ -1,10 +1,9 @@
+import { ViewListDiscussion } from '@/module/division_new';
 import React from 'react';
 
 function Page() {
   return (
-    <div>
+    <ViewListDiscussion />
-      Page
-    </div>
   );
 }
 

src/module/division_new/_division_fitur/discussion/component/drawer_detail_discussion.tsx

@@ -0,0 +1,75 @@
+import { WARNA } from "@/module/_global";
+import LayoutModal from "@/module/_global/layout/layout_modal";
+import { Box, Stack, SimpleGrid, Flex, Text } from "@mantine/core";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { BsTrash3 } from "react-icons/bs";
+import { FaPencil } from "react-icons/fa6";
+import { MdClose } from "react-icons/md";
+
+export default function DrawerDetailDiscussion({ onSuccess }: { onSuccess: (val: boolean) => void }) {
+   const [isValModal, setValModal] = useState(false)
+   const [isValModalStatus, setValModalStatus] = useState(false)
+
+   function onTrue(val: boolean) {
+      if (val) {
+         onSuccess(true)
+         toast.success("Sukses! Data terhapus");
+      }
+      setValModal(false)
+   }
+
+   function onTrueStatus(val: boolean) {
+      if (val) {
+         onSuccess(true)
+         toast.success("Sukses! Data terupdate");
+      }
+      setValModalStatus(false)
+   }
+
+   return (
+      <Box>
+         <Stack pt={10}>
+            <SimpleGrid
+               cols={{ base: 3, sm: 3, lg: 3 }}
+            >
+               <Flex onClick={() => setValModal(true)} justify={'center'} align={'center'} direction={'column'} >
+                  <Box>
+                     <BsTrash3 size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua}>Hapus</Text>
+                  </Box>
+               </Flex>
+
+               <Flex onClick={() => window.location.href = "/discussion/edit/2"} justify={'center'} align={'center'} direction={'column'} >
+                  <Box>
+                     <FaPencil size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua}>Edit</Text>
+                  </Box>
+               </Flex>
+
+               <Flex onClick={() => setValModalStatus(true)} justify={'center'} align={'center'} direction={'column'} >
+                  <Box>
+                     <MdClose size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua}>Tutup Diskusi</Text>
+                  </Box>
+               </Flex>
+            </SimpleGrid>
+         </Stack>
+
+         <LayoutModal opened={isValModal} onClose={() => setValModal(false)}
+            description="Apakah Anda yakin ingin menghapus diskusi ini?"
+            onYes={(val) => { onTrue(val) }} />
+
+
+         <LayoutModal opened={isValModalStatus} onClose={() => setValModalStatus(false)}
+            description="Apakah Anda yakin ingin mengubah status diskusi ini?"
+            onYes={(val) => { onTrueStatus(val) }} />
+      </Box>
+   )
+}

src/module/division_new/_division_fitur/discussion/component/drawer_list_discussion.tsx

@@ -0,0 +1,24 @@
+import { WARNA } from "@/module/_global";
+import { Box, Stack, SimpleGrid, Flex, Text } from "@mantine/core";
+import { IoAddCircle } from "react-icons/io5";
+
+export default function DrawerListDiscussion() {
+   return (
+      <Box>
+         <Stack pt={10}>
+            <SimpleGrid
+               cols={{ base: 3, sm: 3, lg: 3 }}
+            >
+               <Flex onClick={() => window.location.href = "/discussion/create"} justify={'center'} align={'center'} direction={'column'} >
+                  <Box>
+                     <IoAddCircle size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua}>Tambah Diskusi</Text>
+                  </Box>
+               </Flex>
+            </SimpleGrid>
+         </Stack>
+      </Box>
+   )
+}

src/module/division_new/_division_fitur/discussion/component/form_create_discussion.tsx

@@ -0,0 +1,50 @@
+'use client'
+import { WARNA } from "@/module/_global";
+import LayoutModal from "@/module/_global/layout/layout_modal";
+import { Avatar, Box, Button, Group, Text, Textarea } from "@mantine/core";
+import { useState } from "react";
+import toast from "react-hot-toast";
+
+export default function FormCreateDiscussion() {
+   const [isValModal, setValModal] = useState(false)
+
+   function onTrue(val: boolean) {
+      if (val) {
+         toast.success("Sukses! Data tersimpan");
+      }
+      setValModal(false)
+   }
+
+   return (
+      <Box>
+         <Box p={20}>
+            <Group>
+               <Avatar src={'https://i.pravatar.cc/1000?img=32'} alt="it's me" size="lg" />
+               <Box>
+                  <Textarea
+                     placeholder="Tuliskan apa yang ingin anda diskusikan"
+                     w={"100%"}
+                  />
+               </Box>
+            </Group>
+            <Box mt="xl">
+               <Button
+                  color="white"
+                  bg={WARNA.biruTua}
+                  size="lg"
+                  radius={30}
+                  fullWidth
+                  onClick={() => setValModal(true)}
+               >
+                  Simpan
+               </Button>
+            </Box>
+         </Box>
+
+         <LayoutModal opened={isValModal} onClose={() => setValModal(false)}
+            description="Apakah Anda yakin ingin
+        menambah data?"
+            onYes={(val) => { onTrue(val) }} />
+      </Box>
+   )
+}  

src/module/division_new/_division_fitur/discussion/component/form_edit_discussion.tsx

@@ -0,0 +1,53 @@
+'use client'
+import { WARNA } from "@/module/_global"
+import LayoutModal from "@/module/_global/layout/layout_modal"
+import { Box, Group, Avatar, Textarea, Button } from "@mantine/core"
+import { useRouter } from "next/navigation"
+import { useState } from "react"
+import toast from "react-hot-toast"
+
+export default function FormEditDiscussion() {
+   const [isValModal, setValModal] = useState(false)
+   const router = useRouter()
+
+   function onTrue(val: boolean) {
+      if (val) {
+         toast.success("Sukses! Data tersimpan");
+         router.back()
+
+      }
+      setValModal(false)
+   }
+
+   return (
+      <Box>
+         <Box p={20}>
+            <Group>
+               <Avatar src={'https://i.pravatar.cc/1000?img=32'} alt="it's me" size="lg" />
+               <Box>
+                  <Textarea
+                     placeholder="Tuliskan apa yang ingin anda diskusikan"
+                     w={"100%"}
+                  />
+               </Box>
+            </Group>
+            <Box mt="xl">
+               <Button
+                  color="white"
+                  bg={WARNA.biruTua}
+                  size="lg"
+                  radius={30}
+                  fullWidth
+                  onClick={() => setValModal(true)}
+               >
+                  Simpan
+               </Button>
+            </Box>
+         </Box>
+
+         <LayoutModal opened={isValModal} onClose={() => setValModal(false)}
+            description="Apakah Anda yakin ingin mengubah data?"
+            onYes={(val) => { onTrue(val) }} />
+      </Box>
+   )
+}

src/module/division_new/_division_fitur/discussion/component/list_discussion.tsx

@@ -0,0 +1,92 @@
+'use client'
+import { WARNA } from "@/module/_global";
+import { Avatar, Badge, Box, Flex, Group, Text } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { GrChatOption } from "react-icons/gr";
+
+const dataAnggota = [
+   {
+      id: 1,
+      name: "Iqbal Ramadan",
+      image: "https://i.pravatar.cc/1000?img=5",
+      status: true,
+      jumlah: 16,
+      desc: 'is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. '
+   },
+   {
+      id: 2,
+      name: "Doni Setiawan",
+      image: "https://i.pravatar.cc/1000?img=10",
+      status: true,
+      jumlah: 26,
+      desc: 'It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.'
+   },
+   {
+      id: 3,
+      name: "Rangga Agung",
+      image: "https://i.pravatar.cc/1000?img=51",
+      status: false,
+      jumlah: 11,
+      desc: 'It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'
+   },
+   {
+      id: 4,
+      name: "Ramadan Sananta",
+      image: "https://i.pravatar.cc/1000?img=15",
+      status: false,
+      jumlah: 30,
+      desc: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. '
+   },
+   {
+      id: 5,
+      name: "Imam Baroni",
+      image: "https://i.pravatar.cc/1000?img=22",
+      status: false,
+      jumlah: 29,
+      desc: 'Contrary to popular belief, Lorem Ipsum is not simply random text'
+   },
+];
+
+export default function ListDiscussion() {
+   const router = useRouter()
+   return (
+      <Box p={20}>
+         {dataAnggota.map((v, i) => {
+            return (
+               <>
+                  <Flex
+                     justify={"space-between"}
+                     align={"center"}
+                     mt={20}
+                     key={i}
+                     onClick={() => {
+                        router.push(`/discussion/${v.id}`)
+                     }}
+                  >
+                     <Group>
+                        <Avatar src={v.image} alt="it's me" size="lg" />
+                        <Box>
+                           <Text c={WARNA.biruTua} fw={"bold"}>
+                              {v.name}
+                           </Text>
+                           <Badge color={(v.status) ? "green" : "red"} size="sm">{(v.status) ? "BUKA" : "TUTUP"}</Badge>
+                        </Box>
+                     </Group>
+                     <Text c={"grey"}>1 Jam</Text>
+                  </Flex>
+                  <Box>{v.desc}</Box>
+                  <Group justify="space-between" mt={20} c={'#8C8C8C'}>
+                     <Group gap={5} align="center">
+                        <GrChatOption size={18} />
+                        <Text fz={13}>Diskusikan</Text>
+                     </Group >
+                     <Group gap={5} align="center">
+                        <Text fz={13}>{v.jumlah} Komentar</Text>
+                     </Group>
+                  </Group>
+               </>
+            );
+         })}
+      </Box>
+   )
+}

src/module/division_new/_division_fitur/discussion/component/navbar_detail_discussion.tsx

@@ -0,0 +1,23 @@
+'use client'
+import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
+import { ActionIcon } from "@mantine/core";
+import { useState } from "react";
+import { HiMenu } from "react-icons/hi";
+import DrawerDetailDiscussion from "./drawer_detail_discussion";
+
+export default function NavbarDetailDiscussion() {
+   const [openDrawer, setOpenDrawer] = useState(false)
+   return (
+      <>
+         <LayoutNavbarNew back="" title="Diskusi Divisi Keuangan"
+            menu={
+               <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+                  <HiMenu size={20} color='white' />
+               </ActionIcon>}
+         />
+         <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
+            <DrawerDetailDiscussion onSuccess={(val) => setOpenDrawer(false)} />
+         </LayoutDrawer>
+      </>
+   );
+}

src/module/division_new/_division_fitur/discussion/component/navbar_list_discussion.tsx

@@ -0,0 +1,24 @@
+'use client'
+import { LayoutNavbarNew, WARNA, LayoutDrawer } from "@/module/_global";
+import { ActionIcon } from "@mantine/core";
+import { HiMenu } from "react-icons/hi";
+import { useState } from "react";
+import DrawerListDiscussion from "./drawer_list_discussion";
+
+export default function NavbarListDiscussion() {
+   const [openDrawer, setOpenDrawer] = useState(false)
+   return (
+      <>
+         <LayoutNavbarNew back="" title="Diskusi"
+            menu={
+               <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+                  <HiMenu size={20} color='white' />
+               </ActionIcon>
+            }
+         />
+         <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
+            <DrawerListDiscussion />
+         </LayoutDrawer>
+      </>
+   );
+}

src/module/division_new/_division_fitur/discussion/view/view_create_discussion.tsx

@@ -0,0 +1,11 @@
+import { LayoutNavbarNew } from "@/module/_global";
+import FormCreateDiscussion from "../component/form_create_discussion";
+
+export default function ViewCreateDiscussion() {
+   return (
+      <>
+         <LayoutNavbarNew back="" title="Tambah Diskusi" menu={<></>} />
+         <FormCreateDiscussion />
+      </>
+   )
+}

src/module/division_new/_division_fitur/discussion/view/view_detail_discussion.tsx

@@ -0,0 +1,106 @@
+import { Avatar, Badge, Box, Flex, Group, Text } from "@mantine/core";
+import NavbarDetailDiscussion from "../component/navbar_detail_discussion";
+import { WARNA } from "@/module/_global";
+import { GrChatOption } from "react-icons/gr";
+
+const dataAnggota = [
+   {
+      id: 1,
+      name: "Iqbal Ramadan",
+      image: "https://i.pravatar.cc/1000?img=5",
+      status: true,
+      jumlah: 16,
+      desc: 'is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. '
+   },
+   {
+      id: 2,
+      name: "Doni Setiawan",
+      image: "https://i.pravatar.cc/1000?img=10",
+      status: true,
+      jumlah: 26,
+      desc: 'It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.'
+   },
+   {
+      id: 3,
+      name: "Rangga Agung",
+      image: "https://i.pravatar.cc/1000?img=51",
+      status: false,
+      jumlah: 11,
+      desc: 'It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'
+   },
+   {
+      id: 4,
+      name: "Ramadan Sananta",
+      image: "https://i.pravatar.cc/1000?img=15",
+      status: false,
+      jumlah: 30,
+      desc: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. '
+   },
+   {
+      id: 5,
+      name: "Imam Baroni",
+      image: "https://i.pravatar.cc/1000?img=22",
+      status: false,
+      jumlah: 29,
+      desc: 'Contrary to popular belief, Lorem Ipsum is not simply random text'
+   },
+];
+
+export default function ViewDetailDiscussion() {
+
+   return (
+      <>
+         <NavbarDetailDiscussion />
+         <Box p={20}>
+            <Flex
+               justify={"space-between"}
+               align={"center"}
+               mt={20}
+            >
+               <Group>
+                  <Avatar src={'https://i.pravatar.cc/1000?img=5'} alt="it's me" size="lg" />
+                  <Box>
+                     <Text c={WARNA.biruTua} fw={"bold"}>
+                        Fibra Marcell
+                     </Text>
+                     <Badge color={"green"} size="sm">BUKA</Badge>
+                  </Box>
+               </Group>
+               <Text c={"grey"}>1 Jam</Text>
+            </Flex>
+            <Box>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</Box>
+            <Group justify="space-between" mt={20} c={'#8C8C8C'}>
+               <Group gap={5} align="center">
+                  <GrChatOption size={18} />
+                  <Text fz={13}>10 Komentar</Text>
+               </Group >
+            </Group>
+
+            <Box p={10}>
+               {dataAnggota.map((v, i) => {
+                  return (
+                     <Box key={i} style={{ borderBottom: "1px solid #8C8C8C" }} p={5}>
+                        <Flex
+                           justify={"space-between"}
+                           align={"center"}
+                        >
+                           <Group>
+                              <Avatar src={v.image} alt="it's me" size="lg" />
+                              <Box>
+                                 <Text c={WARNA.biruTua} fw={"bold"}>
+                                    {v.name}
+                                 </Text>
+                              </Box>
+                           </Group>
+                           <Text c={"grey"}>1 Jam</Text>
+                        </Flex>
+                        <Box>{v.desc}</Box>
+                     </Box>
+                  );
+               })}
+            </Box>
+
+         </Box>
+      </>
+   )
+}

src/module/division_new/_division_fitur/discussion/view/view_edit_discussion.tsx

@@ -0,0 +1,11 @@
+import { LayoutNavbarNew } from "@/module/_global";
+import FormEditDiscussion from "../component/form_edit_discussion";
+
+export default function ViewEditDiscussion() {
+   return (
+      <>
+         <LayoutNavbarNew back="" title="Edit Diskusi" menu={<></>} />
+         <FormEditDiscussion />
+      </>
+   )
+}

src/module/division_new/_division_fitur/discussion/view/view_list_discussion.tsx

@@ -0,0 +1,11 @@
+import ListDiscussion from "../component/list_discussion";
+import NavbarListDiscussion from "../component/navbar_list_discussion";
+
+export default function ViewListDiscussion() {
+   return (
+      <div>
+         <NavbarListDiscussion />
+         <ListDiscussion/>
+      </div>
+   );
+}

src/module/division_new/components/detail_division/detail_division.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import CarouselDivision from './carousel_division';
 import { LayoutNavbarNew } from '@/module/_global';
 import FeatureDetailDivision from './feature_detail_division';
+import ListDiscussionOnDetailDivision from './list_discussion';
 
 export default function DetailDivision() {
   return (
@@ -12,6 +13,7 @@ export default function DetailDivision() {
         <Stack>
           <CarouselDivision />
           <FeatureDetailDivision />
+          <ListDiscussionOnDetailDivision />
         </Stack>
       </Box>
     </Box>

src/module/division_new/components/detail_division/list_discussion.tsx

@@ -0,0 +1,76 @@
+import { WARNA } from "@/module/_global"
+import { Box, Group, Text } from "@mantine/core"
+import { CiUser, CiClock2 } from "react-icons/ci"
+import { GoDiscussionClosed } from "react-icons/go"
+
+
+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 ListDiscussionOnDetailDivision() {
+   return (
+      <>
+         <Box pt={10}>
+            <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Diskusi Terbaru</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/division_new/index.ts

@@ -1,5 +1,9 @@
 import ViewCreateDivisionCalender from "./_division_fitur/calender/view/view_create_division_calender";
 import ViewDivisionCalender from "./_division_fitur/calender/view/view_division_calender";
+import ViewCreateDiscussion from "./_division_fitur/discussion/view/view_create_discussion";
+import ViewDetailDiscussion from "./_division_fitur/discussion/view/view_detail_discussion";
+import ViewEditDiscussion from "./_division_fitur/discussion/view/view_edit_discussion";
+import ViewListDiscussion from "./_division_fitur/discussion/view/view_list_discussion";
 import ViewCreateTaskDivision from "./_division_fitur/task/view/view_create_division_task";
 import ViewDetailDivisionTask from "./_division_fitur/task/view/view_detail_division_task";
 import ViewDivisionTask from "./_division_fitur/task/view/view_division_task";
@@ -23,3 +27,7 @@ export { ViewUpdateProgressDivisionTask }
 export { ViewDivisionCalender }
 export { ViewCreateDivisionCalender }
 export { ViewCreateTaskDivision }
+export { ViewListDiscussion }
+export { ViewCreateDiscussion }
+export { ViewDetailDiscussion }
+export { ViewEditDiscussion }

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 { WARNA } from "@/module/_global"
-import { Box, Group, Text } from "@mantine/core";
+import { Box, Divider, Group, Text } from "@mantine/core"
-import { GoDiscussionClosed } from "react-icons/go";
-import { CiClock2, CiUser } from "react-icons/ci";
 
-const dataDiskusi = [
+const dataEvent = [
    {
       id: 1,
-      judul: 'Mengatasi Limbah Makanan ',
+      title: 'Pembahasan Mengenai Darmasaba',
-      user: 'Fibra Marcell',
+      jamAwal: "10.00",
-      date: '21 Juni 2024'
+      jamAkhir: "11.00",
+      dibuat: "Jhon"
    },
    {
       id: 2,
-      judul: 'Pentingnya Menjaga Kelestarian Hutan ',
+      title: 'Pembahasan Mengenai Darmasaba',
-      user: 'Bayu Tegar',
+      jamAwal: "11.00",
-      date: '15 Juni 2024'
+      jamAkhir: "12.00",
+      dibuat: "Jhon"
    },
    {
       id: 3,
-      judul: 'Mengatasi Limbah Industri ',
+      title: 'Pembahasan Mengenai Darmasaba',
-      user: 'Nian Putri',
+      jamAwal: "13.00",
-      date: '11 Mei 2024'
+      jamAkhir: "14.00",
+      dibuat: "Jhon"
    },
    {
       id: 4,
-      judul: 'Manfaat Sampah Plastik',
+      title: 'Pembahasan Mengenai Darmasaba',
-      user: 'Budi Prasetyo',
+      jamAwal: "15.00",
-      date: '10 Mei 2024'
+      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
          }}>
-            {
+            {dataEvent.map((event, index) => {
-               dataDiskusi.map((v, i) => {
+               const bgColor = ['#D8D8F1', '#FED6C5'][index % 2]
+               const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
                return (
-                     <Box key={i} style={{
+                  <Box key={event.id} m={10}>
-                        borderRadius: 10,
+                     <Box bg={bgColor} pl={15} p={10} style={{
-                        border: `1px solid ${"#D6D8F6"}`,
+                        borderRadius: 10
-                        padding: 10
+                     }} h={113}>
-                     }} mb={10}>
                         <Group>
-                           <GoDiscussionClosed size={25} />
+                           <Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
-                           <Box w={{ base: 230, md: 400 }}>
+                           <Box>
-                              <Text fw={'bold'}>{v.judul}</Text>
+                              <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'}>
+                     </Box>
-                           <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/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>