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

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

Browse Source 
Amalia/15 jul 24
This commit is contained in:
Amalia
2024-07-15 17:37:25 +08:00
committed by GitHub
parent 0426c26a8d db5176e11c
commit ce6fc423a4
23 changed files with 904 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/(application)/(detail-division)/discussion/[id]/page.tsx Normal file
View File

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

9
src/app/(application)/(detail-division)/discussion/create/page.tsx Normal file
View File

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

9
src/app/(application)/(detail-division)/discussion/edit/[id]/page.tsx Normal file
View File

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

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

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

75
src/module/division_new/_division_fitur/discussion/component/drawer_detail_discussion.tsx Normal file
View File

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

24
src/module/division_new/_division_fitur/discussion/component/drawer_list_discussion.tsx Normal file
View File

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

50
src/module/division_new/_division_fitur/discussion/component/form_create_discussion.tsx Normal file
View File

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

53
src/module/division_new/_division_fitur/discussion/component/form_edit_discussion.tsx Normal file
View File

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

92
src/module/division_new/_division_fitur/discussion/component/list_discussion.tsx Normal file
View File

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

23
src/module/division_new/_division_fitur/discussion/component/navbar_detail_discussion.tsx Normal file
View File

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

24
src/module/division_new/_division_fitur/discussion/component/navbar_list_discussion.tsx Normal file
View File

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

11
src/module/division_new/_division_fitur/discussion/view/view_create_discussion.tsx Normal file
View File

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

106
src/module/division_new/_division_fitur/discussion/view/view_detail_discussion.tsx Normal file
View File

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

11
src/module/division_new/_division_fitur/discussion/view/view_edit_discussion.tsx Normal file
View File

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

11
src/module/division_new/_division_fitur/discussion/view/view_list_discussion.tsx Normal file
View File

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

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

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

76
src/module/division_new/components/detail_division/list_discussion.tsx Normal file
View File

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

10
src/module/division_new/index.ts
View File

@@ -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";
@@ -22,4 +26,8 @@ export { ViewDetailDivisionTask }
export { ViewUpdateProgressDivisionTask }
export { ViewDivisionCalender }
export { ViewCreateDivisionCalender }
export { ViewCreateTaskDivision }
export { ViewCreateTaskDivision }
export { ViewListDiscussion }
export { ViewCreateDiscussion }
export { ViewDetailDiscussion }
export { ViewEditDiscussion }

113
src/module/home/components/chart_document.tsx Normal file
View File

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

77
src/module/home/components/chart_progress_tugas.tsx Normal file
View File

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

73
src/module/home/components/list_discussion.tsx Normal file
View File

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

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

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

10
src/module/home/view/view_home.tsx
View File

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