wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style : update report

Browse Source
This commit is contained in:
lukman
2024-07-15 11:10:57 +08:00
parent 676c64c117
commit f6b1b77083
6 changed files with 190 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/module/division_new/components/create_report.tsx
View File

@@ -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<Date | null>(null);
@@ -30,28 +32,55 @@ export default function CreateReport() {
placeholder="Date input"
/>
<Box pt={10}>
<Box bg={'white'} style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
borderRadius: 10,
padding: 10
}}>
<Box
bg={"white"}
style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
borderRadius: 10,
padding: 10,
}}
>
<EchartPaiReport />
</Box>
</Box>
<Box pt={10}>
<Box bg={'white'} style={{
border: `1px solid ${WARNA.borderBiruMuda}`,
borderRadius: 10,
padding: 10
}}>
<Box
bg={"white"}
style={{
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>
);
}

67
src/module/division_new/components/discussion_report.tsx Normal file
View File

@@ -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>
)
}

6
src/module/division_new/components/echart_bar_report.tsx
View File

@@ -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: {

2
src/module/division_new/components/echart_pai_report.tsx
View File

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

62
src/module/division_new/components/event_report.tsx Normal file
View File

@@ -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>
);
}

12
src/module/home/components/list_event.tsx
View File

@@ -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>
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
<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>