Merge pull request #47 from bipproduction/lukman/15-juli-2024

Lukman/15 juli 2024

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

@@ -0,0 +1,10 @@
+import { ViewCreateDivisionCalender } from '@/module/division_new';
+import React from 'react';
+
+function Page() {
+  return (
+    <ViewCreateDivisionCalender/>
+  );
+}
+
+export default Page;

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

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

src/module/_global/layout/layout_navbar_new.tsx

@@ -11,7 +11,7 @@ export const LayoutNavbarNew = ({ back, title, menu }: { back: string, title: st
          style={{
             borderBottomLeftRadius: 20,
             borderBottomRightRadius: 20,
-            zIndex: 100,
+            zIndex: 900,
             boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)"
          }}
       >
@@ -20,7 +20,6 @@ export const LayoutNavbarNew = ({ back, title, menu }: { back: string, title: st
                <LayoutIconBack back={back} />
             </Grid.Col>
             <Grid.Col span={8}>
-               {/* <Text ta={'center'} fw={'bold'} c={'white'}>GROUP</Text> */}
                <Title c={WARNA.bgWhite} ta={'center'} order={3}>{_.startCase(title)}</Title>
             </Grid.Col>
             <Grid.Col span="auto">

src/module/division_new/_division_fitur/calender/components/create_calender_division_caleder.tsx

@@ -0,0 +1,11 @@
+import { Box } from '@mantine/core';
+import React from 'react';
+import NavbarCreateDivisionCalender from './navbar_create_division_calender';
+
+export default function CreateCalenderDivisionCaleder() {
+    return (
+        <Box>
+            <NavbarCreateDivisionCalender />
+        </Box>
+    );
+}

src/module/division_new/_division_fitur/calender/components/date_event_division.tsx

@@ -0,0 +1,104 @@
+import { WARNA } from '@/module/_global';
+import { Box, Divider, Group, Indicator, Text } from '@mantine/core';
+import { DatePicker, DatePickerProps } from '@mantine/dates';
+import React from 'react';
+
+const HariIni = [
+  {
+    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"
+  },
+]
+const Besok = [
+  {
+    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"
+  },
+]
+
+export default function DateEventDivision() {
+  const dayRenderer: DatePickerProps['renderDay'] = (date) => {
+    const day = date.getDate();
+    return (
+      <Indicator size={6} color="red" offset={-5} disabled={day !== 16}>
+        <div>{day}</div>
+      </Indicator>
+    );
+  };
+  return (
+    <Box>
+      <Group
+        justify="center"
+        bg={"white"}
+        py={20}
+        style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+      >
+        <DatePicker size='md' defaultValue={new Date()} renderDay={dayRenderer} />
+      </Group>
+      <Box>
+        <Text mb={10} mt={20}  fw={"bold"}>Hari Ini</Text>
+        {HariIni.map((event, index) => {
+          const bgColor = ['#D8D8F1', '#FED6C5'][index % 2]
+          const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
+          return (
+            <Box key={event.id} mt={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>
+          )
+        })}
+        <Text mb={10} mt={20}  fw={"bold"}>16 Juli 2024</Text>
+        {Besok.map((event, index) => {
+          const bgColor = ['#D8D8F1', '#FED6C5'][index % 2]
+          const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
+          return (
+            <Box key={event.id} mt={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>
+    </Box>
+  );
+}

src/module/division_new/_division_fitur/calender/components/dawer_division_calender.tsx

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

src/module/division_new/_division_fitur/calender/components/navbar_create_division_calender.tsx

@@ -0,0 +1,44 @@
+"use client"
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { Box, Input, Stack } from '@mantine/core';
+import { DateInput } from '@mantine/dates';
+import React, { useState } from 'react';
+import { BsCalendarDate } from 'react-icons/bs';
+import { PiIdentificationCardLight } from "react-icons/pi";
+
+export default function NavbarCreateDivisionCalender() {
+  const [value, setValue] = useState<Date | null>(null);
+  return (
+    <Box>
+      <LayoutNavbarNew back="/calender" title="tambah kalender" menu />
+      <Box p={20}>
+        <Stack>
+          <Input
+            styles={{
+              input: {
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              },
+            }}
+            placeholder="Event Name"
+            size="lg"
+            leftSection={<PiIdentificationCardLight size={30} color={WARNA.biruTua} />}
+          />
+          <DateInput
+            styles={{
+              input: {
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              },
+            }}
+            value={value}
+            onChange={setValue}
+            placeholder="Date input"
+            size="lg"
+            leftSection={<BsCalendarDate size={25} color={WARNA.biruTua} />}
+          />
+        </Stack>
+      </Box>
+    </Box>
+  );
+} 

src/module/division_new/_division_fitur/calender/components/navbar_division_calender.tsx

@@ -0,0 +1,29 @@
+'use client'
+import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
+import { ActionIcon, Box } from '@mantine/core';
+import React, { useState } from 'react';
+import { HiMenu } from 'react-icons/hi';
+import DawerDivisionCalender from './dawer_division_calender';
+import DateEventDivision from './date_event_division';
+
+export default function NavbarDivisionCalender() {
+  const [openDrawer, setOpenDrawer] = useState(false)
+  return (
+    <div>
+      <LayoutNavbarNew back="" title="Divisi - kalender"
+        menu={
+          <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+            <HiMenu size={20} color='white' />
+          </ActionIcon>
+        }
+      />
+      <Box p={20}>
+        <DateEventDivision/>
+      </Box>
+      <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
+        <DawerDivisionCalender/>
+      </LayoutDrawer>
+    </div>
+  );
+}
+

src/module/division_new/_division_fitur/calender/view/view_create_division_calender.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import CreateCalenderDivisionCaleder from '../components/create_calender_division_caleder';
+
+export default function ViewCreateDivisionCalender() {
+  return (
+    <CreateCalenderDivisionCaleder />
+  );
+}
+

src/module/division_new/_division_fitur/calender/view/view_division_calender.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import NavbarDivisionCalender from '../components/navbar_division_calender';
+import { Box } from '@mantine/core';
+
+export default function ViewDivisionCalender() {
+  return (
+    <Box>
+      <NavbarDivisionCalender/>
+    </Box>
+  );
+}
+

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/division_new/index.ts

@@ -1,3 +1,5 @@
+import ViewCreateDivisionCalender from "./_division_fitur/calender/view/view_create_division_calender";
+import ViewDivisionCalender from "./_division_fitur/calender/view/view_division_calender";
 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";
@@ -18,4 +20,6 @@ export { ViewDetailDivision }
 export { ViewDivisionTask }
 export { ViewDetailDivisionTask }
 export { ViewUpdateProgressDivisionTask }
+export { ViewDivisionCalender }
+export { ViewCreateDivisionCalender }
 export { ViewCreateTaskDivision }

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>