From f6b1b770833e4ca8f47c9b7b474fd4a262f604ea Mon Sep 17 00:00:00 2001 From: lukman Date: Mon, 15 Jul 2024 11:10:57 +0800 Subject: [PATCH 1/2] style : update report --- .../division_new/components/create_report.tsx | 69 +++++++++++++------ .../components/discussion_report.tsx | 67 ++++++++++++++++++ .../components/echart_bar_report.tsx | 6 +- .../components/echart_pai_report.tsx | 2 +- .../division_new/components/event_report.tsx | 62 +++++++++++++++++ src/module/home/components/list_event.tsx | 12 ++-- 6 files changed, 190 insertions(+), 28 deletions(-) create mode 100644 src/module/division_new/components/discussion_report.tsx create mode 100644 src/module/division_new/components/event_report.tsx diff --git a/src/module/division_new/components/create_report.tsx b/src/module/division_new/components/create_report.tsx index ac934ae..d613903 100644 --- a/src/module/division_new/components/create_report.tsx +++ b/src/module/division_new/components/create_report.tsx @@ -1,10 +1,12 @@ -"use client" -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'; +"use client"; +import { LayoutNavbarNew, WARNA } from "@/module/_global"; +import { Box, Select, Stack, Text } 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"; +import EventReport from "./event_report"; +import DiscussionReport from "./discussion_report"; export default function CreateReport() { const [value, setValue] = useState(null); @@ -30,28 +32,55 @@ export default function CreateReport() { placeholder="Date input" /> - + - + - - + + + + + + + + + + ); } - diff --git a/src/module/division_new/components/discussion_report.tsx b/src/module/division_new/components/discussion_report.tsx new file mode 100644 index 0000000..1dae551 --- /dev/null +++ b/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 ( + + DISKUSI + {dataDiskusi.map((v, i) => { + return ( + + + + + + {v.judul} + + + + + + {v.user} + + + + {v.date} + + + + + ) + }) + } + + ) +} \ No newline at end of file diff --git a/src/module/division_new/components/echart_bar_report.tsx b/src/module/division_new/components/echart_bar_report.tsx index 1cf0136..ee0e6eb 100644 --- a/src/module/division_new/components/echart_bar_report.tsx +++ b/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: { diff --git a/src/module/division_new/components/echart_pai_report.tsx b/src/module/division_new/components/echart_pai_report.tsx index 351331b..d937e84 100644 --- a/src/module/division_new/components/echart_pai_report.tsx +++ b/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, diff --git a/src/module/division_new/components/event_report.tsx b/src/module/division_new/components/event_report.tsx new file mode 100644 index 0000000..32077ec --- /dev/null +++ b/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 ( + + EVENT SELESAI DILAKSANAKAN + {dataEvent.map((event, index) => { + const bgColor = ['#D8D8F1', '#FED6C5'][index % 2] + const colorDivider = ['#535FCA', '#A7A7A7'][index % 2] + return ( + + + + + + {event.jamAwal} - {event.jamAkhir} + {event.title} + Dibuat oleh : {event.dibuat} + + + + + ) + })} + + ); +} diff --git a/src/module/home/components/list_event.tsx b/src/module/home/components/list_event.tsx index 11eae86..3c86a09 100644 --- a/src/module/home/components/list_event.tsx +++ b/src/module/home/components/list_event.tsx @@ -49,14 +49,16 @@ export default function ListEvent() { }} mb={10}> - {v.judul} + + {v.judul} + - - + + {v.user} - - + + {v.date} From 97ceb034bcb5d84be043ee7a673bc9c46c036b75 Mon Sep 17 00:00:00 2001 From: lukman Date: Mon, 15 Jul 2024 12:32:29 +0800 Subject: [PATCH 2/2] style : add calender --- .../calender/create/page.tsx | 10 ++ .../(detail-division)/calender/page.tsx | 5 +- .../_global/layout/layout_navbar_new.tsx | 3 +- .../create_calender_division_caleder.tsx | 11 ++ .../components/date_event_division.tsx | 104 ++++++++++++++++++ .../components/dawer_division_calender.tsx | 35 ++++++ .../navbar_create_division_calender.tsx | 44 ++++++++ .../components/navbar_division_calender.tsx | 29 +++++ .../view/view_create_division_calender.tsx | 9 ++ .../calender/view/view_division_calender.tsx | 12 ++ src/module/division_new/index.ts | 6 +- 11 files changed, 262 insertions(+), 6 deletions(-) create mode 100644 src/app/(application)/(detail-division)/calender/create/page.tsx create mode 100644 src/module/division_new/_division_fitur/calender/components/create_calender_division_caleder.tsx create mode 100644 src/module/division_new/_division_fitur/calender/components/date_event_division.tsx create mode 100644 src/module/division_new/_division_fitur/calender/components/dawer_division_calender.tsx create mode 100644 src/module/division_new/_division_fitur/calender/components/navbar_create_division_calender.tsx create mode 100644 src/module/division_new/_division_fitur/calender/components/navbar_division_calender.tsx create mode 100644 src/module/division_new/_division_fitur/calender/view/view_create_division_calender.tsx create mode 100644 src/module/division_new/_division_fitur/calender/view/view_division_calender.tsx diff --git a/src/app/(application)/(detail-division)/calender/create/page.tsx b/src/app/(application)/(detail-division)/calender/create/page.tsx new file mode 100644 index 0000000..b37380e --- /dev/null +++ b/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 ( + + ); +} + +export default Page; diff --git a/src/app/(application)/(detail-division)/calender/page.tsx b/src/app/(application)/(detail-division)/calender/page.tsx index 69da2f2..ec16ade 100644 --- a/src/app/(application)/(detail-division)/calender/page.tsx +++ b/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 ( -
- Page -
+ ); } diff --git a/src/module/_global/layout/layout_navbar_new.tsx b/src/module/_global/layout/layout_navbar_new.tsx index 977a840..9a87534 100644 --- a/src/module/_global/layout/layout_navbar_new.tsx +++ b/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 - {/* GROUP */} {_.startCase(title)} diff --git a/src/module/division_new/_division_fitur/calender/components/create_calender_division_caleder.tsx b/src/module/division_new/_division_fitur/calender/components/create_calender_division_caleder.tsx new file mode 100644 index 0000000..2cfc315 --- /dev/null +++ b/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 ( + + + + ); +} diff --git a/src/module/division_new/_division_fitur/calender/components/date_event_division.tsx b/src/module/division_new/_division_fitur/calender/components/date_event_division.tsx new file mode 100644 index 0000000..8faea28 --- /dev/null +++ b/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 ( + +
{day}
+ + ); + }; + return ( + + + + + + Hari Ini + {HariIni.map((event, index) => { + const bgColor = ['#D8D8F1', '#FED6C5'][index % 2] + const colorDivider = ['#535FCA', '#A7A7A7'][index % 2] + return ( + + + + + + {event.jamAwal} - {event.jamAkhir} + {event.title} + Dibuat oleh : {event.dibuat} + + + + + ) + })} + 16 Juli 2024 + {Besok.map((event, index) => { + const bgColor = ['#D8D8F1', '#FED6C5'][index % 2] + const colorDivider = ['#535FCA', '#A7A7A7'][index % 2] + return ( + + + + + + {event.jamAwal} - {event.jamAkhir} + {event.title} + Dibuat oleh : {event.dibuat} + + + + + ) + })} + + + ); +} diff --git a/src/module/division_new/_division_fitur/calender/components/dawer_division_calender.tsx b/src/module/division_new/_division_fitur/calender/components/dawer_division_calender.tsx new file mode 100644 index 0000000..32b80db --- /dev/null +++ b/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 ( + + + + window.location.href = "/calender/create"} justify={'center'} align={'center'} direction={'column'} > + + + + + Tambah Kalender + + + window.location.href = ""} justify={'center'} align={'center'} direction={'column'} > + + + + + Riwayat + + + + + + ); +} + diff --git a/src/module/division_new/_division_fitur/calender/components/navbar_create_division_calender.tsx b/src/module/division_new/_division_fitur/calender/components/navbar_create_division_calender.tsx new file mode 100644 index 0000000..627ba85 --- /dev/null +++ b/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(null); + return ( + + + + + } + /> + } + /> + + + + ); +} diff --git a/src/module/division_new/_division_fitur/calender/components/navbar_division_calender.tsx b/src/module/division_new/_division_fitur/calender/components/navbar_division_calender.tsx new file mode 100644 index 0000000..9962b38 --- /dev/null +++ b/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 ( +
+ setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings"> + + + } + /> + + + + setOpenDrawer(false)}> + + +
+ ); +} + diff --git a/src/module/division_new/_division_fitur/calender/view/view_create_division_calender.tsx b/src/module/division_new/_division_fitur/calender/view/view_create_division_calender.tsx new file mode 100644 index 0000000..55b6898 --- /dev/null +++ b/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 ( + + ); +} + diff --git a/src/module/division_new/_division_fitur/calender/view/view_division_calender.tsx b/src/module/division_new/_division_fitur/calender/view/view_division_calender.tsx new file mode 100644 index 0000000..9cc1113 --- /dev/null +++ b/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 ( + + + + ); +} + diff --git a/src/module/division_new/index.ts b/src/module/division_new/index.ts index 2affeb4..b97d315 100644 --- a/src/module/division_new/index.ts +++ b/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 ViewDetailDivisionTask from "./_division_fitur/task/view/view_detail_division_task"; import ViewDivisionTask from "./_division_fitur/task/view/view_division_task"; import ViewUpdateProgressDivisionTask from "./_division_fitur/task/view/view_update_progress_division_task"; @@ -16,4 +18,6 @@ export { ViewCreateReport } export { ViewDetailDivision } export { ViewDivisionTask } export { ViewDetailDivisionTask } -export { ViewUpdateProgressDivisionTask } \ No newline at end of file +export { ViewUpdateProgressDivisionTask } +export { ViewDivisionCalender } +export { ViewCreateDivisionCalender } \ No newline at end of file