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

Merge pull request #157 from bipproduction/amalia/28-agustus-24

Browse Source 
home
This commit is contained in:
Amalia
2024-08-28 16:51:37 +08:00
committed by GitHub
parent 59255526a3 476eeb37f6
commit 4fd9f10ab6
22 changed files with 581 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/module/home/components/list_discussion.tsx
View File

@@ -1,77 +0,0 @@
'use client'
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 { useRouter } from "next/navigation";
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() {
const router = useRouter()
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} onClick={() => router.push(`/discussion/1`)}>
<Group>
<GoDiscussionClosed size={25} />
<Box w={{ base: 230, md: 400 }}>
<Text fw={'bold'} truncate="end">{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>
)
}

75
src/module/home/components/list_divisi.tsx
View File

@@ -1,75 +0,0 @@
'use client'
import { WARNA } from "@/module/_global";
import { Carousel } from "@mantine/carousel";
import { Box, Card, Flex, Title, Text } from "@mantine/core";
import _ from "lodash";
import { useRouter } from "next/navigation";
const dataProject = [
{
id: 4,
title: 'Divisi Keuangan',
total: 24
},
{
id: 5,
title: 'Divisi Kesekretariatan',
total: 18
},
{
id: 6,
title: 'Divisi Kemasyarakatan',
total: 12
},
]
export default function ListDivisi() {
const router = useRouter()
return (
<>
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Divisi Teraktif</Text>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
{dataProject.map((v) =>
<Carousel.Slide key={v.id}>
<Box w={{ base: 300, md: 400 }}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}>
<Card.Section>
<Box h={120} bg={`linear-gradient(180deg, rgba(223,218,124,1) 25%, rgba(242,175,70,1) 100%)`}>
<Flex justify={'center'} align={'center'} h={"100%"}>
<Title order={3} c={WARNA.biruTua}>{_.toUpper(v.title)}</Title>
</Flex>
</Box>
</Card.Section>
<Box pt={10} mih={150}>
<Text fw={'bold'} fz={18}>KEGIATAN</Text>
<Text fw={'bolder'} ta={'center'} fz={70}>{v.total}</Text>
</Box>
</Card>
</Box>
</Carousel.Slide>
)}
</Carousel>
{/* {dataProject.map((v, i) => {
return (
<Box key={i} mb={20} >
<Card shadow="sm" padding="md" component="a" radius={10}>
<Card.Section>
<Box h={120} bg={`linear-gradient(180deg, rgba(223,218,124,1) 25%, rgba(242,175,70,1) 100%)`}>
<Flex justify={'center'} align={'center'} h={"100%"}>
<Title order={3} c={WARNA.biruTua}>{_.toUpper(v.title)}</Title>
</Flex>
</Box>
</Card.Section>
<Box pt={10} mih={150}>
<Text fw={'bold'} fz={18}>PROYEK</Text>
<Text fw={'bolder'} ta={'center'} fz={70}>{v.total}</Text>
</Box>
</Card>
</Box>
);
})} */}
</Box>
</>
)
}

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

@@ -1,70 +0,0 @@
'use client'
import { WARNA } from "@/module/_global"
import { Box, Divider, Group, Text } from "@mantine/core"
import { useRouter } from "next/navigation"
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 ListEventHome() {
const router = useRouter()
return (
<Box pt={10}>
<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: 10
}}>
{dataEvent.map((event, index) => {
const bgColor = ['#D8D8F1', '#FED6C5'][index % 2]
const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
return (
<Box key={event.id} m={10} onClick={() => router.push(`/calender?page=detail-event`)}>
<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"} truncate="end">{event.title}</Text>
<Text>Dibuat oleh : {event.dibuat}</Text>
</Box>
</Group>
</Box>
</Box>
)
})}
</Box>
</Box>
)
}

68
src/module/home/components/list_project.tsx
View File

@@ -1,68 +0,0 @@
'use client'
import { WARNA } from "@/module/_global";
import { Carousel } from "@mantine/carousel";
import { Box, Card, Flex, Title, Text, Progress, Stack } from "@mantine/core";
import { useRouter } from "next/navigation";
const dataProject = [
{
id: 4,
title: 'Project 4',
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
status: 'PROSES',
progress: 60,
date: '05 Mei 2024'
},
{
id: 5,
title: 'Project5',
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
status: 'PROSES',
progress: 80,
date: '08 Juni 2024'
},
{
id: 6,
title: 'Project 6',
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
status: 'PROSES',
progress: 47,
date: '10 Mei 2024'
},
]
export default function ListProjects() {
const router = useRouter()
return (
<>
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Kegiatan Terbaru</Text>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
{dataProject.map((v) =>
<Carousel.Slide key={v.id}>
<Box w={{ base: 300, md: 400 }}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/project/${v.id}`)}>
<Card.Section>
<Box h={120} bg={WARNA.biruTua}>
<Flex justify={'center'} align={'center'} h={"100%"}>
<Title order={3} c={"white"}>{v.title}</Title>
</Flex>
</Box>
</Card.Section>
<Stack h={150} align="stretch" justify="center">
<Progress.Root size="xl" radius="xl" style={{ border: `1px solid ${'#BDBDBD'}` }}>
<Progress.Section value={v.progress} color="yellow" striped >
<Progress.Label>{v.progress}%</Progress.Label>
</Progress.Section>
</Progress.Root>
<Text c={WARNA.biruTua}>Progres {v.date}</Text>
</Stack>
</Card>
</Box>
</Carousel.Slide>
)}
</Carousel>
</Box>
</>
)
}

8
src/module/home/index.ts
View File

@@ -1,7 +1,7 @@
import ViewDetailFeature from "./view/view_detail_feature";
import ViewHome from "./view/view_home";
import ViewNotification from "./view/view_notification";
import ViewSearch from "./view/view_search";
import ViewDetailFeature from "./ui/view_detail_feature";
import ViewHome from "./ui/view_home";
import ViewNotification from "./ui/view_notification";
import ViewSearch from "./ui/view_search";
export { ViewHome }
export { ViewDetailFeature }

4
src/module/home/lib/api_home.ts Normal file
View File

@@ -0,0 +1,4 @@
export const funGetHome = async (path?: string) => {
const response = await fetch(`/api/home${(path) ? path : ''}`, { next: { tags: ['discussion'] } });
return await response.json().catch(() => null);
}

37
src/module/home/lib/type_home.ts Normal file
View File

@@ -0,0 +1,37 @@
export interface IDataHomeKegiatan {
id: string
title: string
desc: string
status: string
progress: number
createdAt: string
}
export interface IDataHomeDivision {
id: string
name: string
jumlah: number
}
export interface IDataHomeEvent {
id: string
idDivision: string
title: string
desc: string
status: number
timeStart: string
timeEnd: string
dateStart: string
dateEnd: string
createdAt: string
user_name: string
}
export interface IDataHomeDiskusi {
id: string
idDivision: string
desc: string
title: string
date: string
user: string
}

0
src/module/home/components/carosole.tsx → src/module/home/ui/carosole.tsx
View File

6
src/module/home/components/chart_document.tsx → src/module/home/ui/chart_document.tsx
View File

@@ -70,21 +70,21 @@ export default function ChartDocumentHome() {
data: [
{
value: 78,
name: 'Confidence',
name: 'File',
itemStyle: {
color: "#F3C96B"
}
},
{
value: 35,
name: 'Supportive',
name: 'Folder',
itemStyle: {
color: "#9EC97F"
}
},
{
value: 58,
name: 'Positive',
name: 'Documen',
itemStyle: {
color: "#5971C0"
}

0
src/module/home/components/chart_progress_tugas.tsx → src/module/home/ui/chart_progress_tugas.tsx
View File

0
src/module/home/components/features.tsx → src/module/home/ui/features.tsx
View File

0
src/module/home/components/ui/icon_navbar.tsx → src/module/home/ui/icon_navbar.tsx
View File

107
src/module/home/ui/list_discussion.tsx Normal file
View File

@@ -0,0 +1,107 @@
'use client'
import { WARNA } from "@/module/_global";
import { Box, Group, Skeleton, Text } from "@mantine/core";
import { GoDiscussionClosed } from "react-icons/go";
import { CiClock2, CiUser } from "react-icons/ci";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { IDataHomeDiskusi } from "../lib/type_home";
import { funGetHome } from "../lib/api_home";
import toast from "react-hot-toast";
import { useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
export default function ListDiscussion() {
const router = useRouter()
const [isData, setData] = useState<IDataHomeDiskusi[]>([])
const [loading, setLoading] = useState(true);
const fetchData = async () => {
try {
setData([]);
setLoading(true);
const response = await funGetHome('?cat=discussion')
if (response.success) {
setData(response.data)
} else {
toast.error(response.message);
}
setLoading(false);
} catch (error) {
toast.error("Gagal mendapatkan data, coba lagi nanti");
console.error(error);
} finally {
setLoading(false);
}
};
useShallowEffect(() => {
fetchData();
}, []);
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
}}>
{
loading ?
Array(3)
.fill(null)
.map((_, i) => (
<Box key={i} mb={10}>
<Skeleton height={100} width={"100%"} radius={"md"} />
</Box>
))
:
_.isEmpty(isData)
?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada diskusi</Text>
</Box>
:
<>
{
isData.map((v, i) => {
return (
<Box key={i} style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 10
}} mb={10} onClick={() => router.push(`/division/${v.idDivision}/discussion/${v.id}`)}>
<Group>
<GoDiscussionClosed size={25} />
<Box w={{ base: 230, md: 400 }}>
<Text fw={"bold"} truncate="end">
{v.desc}
</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>
)
}

84
src/module/home/ui/list_divisi.tsx Normal file
View File

@@ -0,0 +1,84 @@
'use client'
import { WARNA } from "@/module/_global";
import { Carousel } from "@mantine/carousel";
import { Box, Card, Flex, Title, Text, Skeleton } from "@mantine/core";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { IDataHomeDivision } from "../lib/type_home";
import { funGetHome } from "../lib/api_home";
import toast from "react-hot-toast";
import { useShallowEffect } from "@mantine/hooks";
export default function ListDivisi() {
const router = useRouter()
const [isData, setData] = useState<IDataHomeDivision[]>([])
const [loading, setLoading] = useState(true);
const fetchData = async () => {
try {
setData([]);
setLoading(true);
const response = await funGetHome('?cat=division')
if (response.success) {
setData(response.data)
} else {
toast.error(response.message);
}
setLoading(false);
} catch (error) {
toast.error("Gagal mendapatkan data, coba lagi nanti");
console.error(error);
} finally {
setLoading(false);
}
};
useShallowEffect(() => {
fetchData();
}, []);
return (
<>
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Divisi Teraktif</Text>
{loading ?
<Box pb={20}>
<Skeleton width={"100%"} height={200} radius={"md"} />
</Box>
:
_.isEmpty(isData)
?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada divisi</Text>
</Box>
:
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
{isData.map((v) =>
<Carousel.Slide key={v.id}>
<Box w={{ base: 300, md: 400 }}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}>
<Card.Section>
<Box h={120} bg={`linear-gradient(180deg, rgba(223,218,124,1) 25%, rgba(242,175,70,1) 100%)`}>
<Flex justify={'center'} align={'center'} h={"100%"}>
<Title order={3} c={WARNA.biruTua}>{v.name}</Title>
</Flex>
</Box>
</Card.Section>
<Box pt={10} mih={150}>
<Text fw={'bold'} fz={18}>KEGIATAN</Text>
<Text fw={'bolder'} ta={'center'} fz={70}>{v.jumlah}</Text>
</Box>
</Card>
</Box>
</Carousel.Slide>
)}
</Carousel>
}
</Box>
</>
)
}

90
src/module/home/ui/list_event.tsx Normal file
View File

@@ -0,0 +1,90 @@
'use client'
import { WARNA } from "@/module/_global"
import { Box, Divider, Group, Skeleton, Text } from "@mantine/core"
import { useRouter } from "next/navigation"
import { useState } from "react"
import { IDataHomeEvent } from "../lib/type_home"
import { funGetHome } from "../lib/api_home"
import toast from "react-hot-toast"
import { useShallowEffect } from "@mantine/hooks"
import _ from "lodash"
export default function ListEventHome() {
const router = useRouter()
const [isData, setData] = useState<IDataHomeEvent[]>([])
const [loading, setLoading] = useState(true);
const fetchData = async () => {
try {
setData([]);
setLoading(true);
const response = await funGetHome('?cat=event')
if (response.success) {
setData(response.data)
} else {
toast.error(response.message);
}
setLoading(false);
} catch (error) {
toast.error("Gagal mendapatkan data, coba lagi nanti");
console.error(error);
} finally {
setLoading(false);
}
};
useShallowEffect(() => {
fetchData();
}, []);
return (
<Box pt={10}>
<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: 10
}}>
{loading ?
Array(3)
.fill(null)
.map((_, i) => (
<Box key={i} mb={10}>
<Skeleton height={100} width={"100%"} radius={"md"} />
</Box>
))
:
_.isEmpty(isData)
?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '20vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada event</Text>
</Box>
:
isData.map((event, index) => {
const bgColor = ['#D8D8F1', '#FED6C5'][index % 2]
const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
return (
<Box key={event.id} mt={10}>
<Box onClick={() => router.push(`/division/${event.idDivision}/calender/${event.id}`)} bg={bgColor} pl={15} p={10} style={{
borderRadius: 10
}} h={113}>
<Group>
<Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
<Box>
<Text>{event.timeStart} - {event.timeEnd}</Text>
<Text fw={"bold"}>{event.title}</Text>
<Text>Dibuat oleh : {event.user_name}</Text>
</Box>
</Group>
</Box>
</Box>
)
})
}
</Box>
</Box>
)
}

0
src/module/home/components/list_notification.tsx → src/module/home/ui/list_notification.tsx
View File

87
src/module/home/ui/list_project.tsx Normal file
View File

@@ -0,0 +1,87 @@
'use client'
import { WARNA } from "@/module/_global";
import { Carousel } from "@mantine/carousel";
import { Box, Card, Flex, Title, Text, Progress, Stack, Skeleton } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { funGetHome } from "../lib/api_home";
import { IDataHomeKegiatan } from "../lib/type_home";
import _ from "lodash";
export default function ListProjects() {
const router = useRouter()
const [isData, setData] = useState<IDataHomeKegiatan[]>([])
const [loading, setLoading] = useState(true);
const fetchData = async () => {
try {
setData([]);
setLoading(true);
const response = await funGetHome('?cat=kegiatan')
if (response.success) {
setData(response.data)
} else {
toast.error(response.message);
}
setLoading(false);
} catch (error) {
toast.error("Gagal mendapatkan data, coba lagi nanti");
console.error(error);
} finally {
setLoading(false);
}
};
useShallowEffect(() => {
fetchData();
}, []);
return (
<>
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Kegiatan Terbaru</Text>
{loading ?
<Box pb={20}>
<Skeleton width={"100%"} height={200} radius={"md"} />
</Box>
:
_.isEmpty(isData)
?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada kegiatan terbaru</Text>
</Box>
:
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
{isData.map((v) =>
<Carousel.Slide key={v.id}>
<Box w={{ base: 300, md: 400 }}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/project/${v.id}`)}>
<Card.Section>
<Box h={120} bg={WARNA.biruTua}>
<Flex justify={'center'} align={'center'} h={"100%"}>
<Title order={3} c={"white"}>{v.title}</Title>
</Flex>
</Box>
</Card.Section>
<Stack h={150} align="stretch" justify="center">
<Progress.Root size="xl" radius="xl" style={{ border: `1px solid ${'#BDBDBD'}` }}>
<Progress.Section value={v.progress} color="yellow" striped >
<Progress.Label>{v.progress}%</Progress.Label>
</Progress.Section>
</Progress.Root>
<Text c={WARNA.biruTua}>{v.createdAt}</Text>
</Stack>
</Card>
</Box>
</Carousel.Slide>
)}
</Carousel>
}
</Box>
</>
)
}

0
src/module/home/view/view_detail_feature.tsx → src/module/home/ui/view_detail_feature.tsx
View File

20
src/module/home/view/view_home.tsx → src/module/home/ui/view_home.tsx
View File

@@ -1,15 +1,15 @@
import { LayoutNavbarHome } from '@/module/_global';
import { Box, Group, Stack, Text } from '@mantine/core';
import React from 'react';
import Carosole from '../components/carosole';
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 ListDiscussion from '../components/list_discussion';
import ListEventHome from '../components/list_event';
import ChartProgressHome from '../components/chart_progress_tugas';
import ChartDocumentHome from '../components/chart_document';
import Carosole from './carosole';
import Features from './features';
import IconNavbar from './icon_navbar';
import ListProjects from './list_project';
import ListDivisi from './list_divisi';
import ListDiscussion from './list_discussion';
import ListEventHome from './list_event';
import ChartProgressHome from './chart_progress_tugas';
import ChartDocumentHome from './chart_document';
export default function ViewHome() {
@@ -17,7 +17,7 @@ export default function ViewHome() {
<>
<LayoutNavbarHome>
<Group justify='space-between'>
<Text fw={'bold'} c={'white'} >Perbekel Darmasaba</Text>
<Text fw={'bold'} c={'white'}>Perbekel Darmasaba</Text>
<IconNavbar />
</Group>
</LayoutNavbarHome>

2
src/module/home/view/view_notification.tsx → src/module/home/ui/view_notification.tsx
View File

@@ -1,7 +1,7 @@
import { LayoutNavbarNew } from '@/module/_global'
import { Box, } from '@mantine/core'
import React from 'react'
import ListNotification from '../components/list_notification'
import ListNotification from './list_notification'
export default function ViewNotification() {
return (

0
src/module/home/view/view_search.tsx → src/module/home/ui/view_search.tsx
View File