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

UI Admin Menu Desa Sub Menu Profile

Browse Source
This commit is contained in:
nico
2025-05-15 17:47:43 +08:00
parent 2844132ea0
commit f5d68d4982
51 changed files with 1603 additions and 865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/app/darmasaba/(pages)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx
View File

@@ -1,50 +1,27 @@
'use client'
import stateDaftarInformasiPublik from '@/app/admin/(dashboard)/_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
import colors from '@/con/colors';
import { Stack, Box, Text, Center, Image, TextInput, TableTd, TableTr, TableTbody, TableTh, TableThead, Table, ActionIcon } from '@mantine/core';
import React from 'react';
import { Box, Center, Image, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, TextInput } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconSearch } from '@tabler/icons-react';
import { useProxy } from 'valtio/utils';
import BackButton from '../../desa/layanan/_com/BackButto';
import { IconDownload, IconSearch } from '@tabler/icons-react';
const dataTable = [
{
id: 1,
nomer: '1',
jenis: "Peraturan Desa",
deskripsi: "Dokumen yang berisi kebijakan dan regulasi desa",
tanggal: "15 Januari 2024",
unduh: <IconDownload size={20} />
},
{
id: 2,
nomer: '2',
jenis: "Laporan Keuangan",
deskripsi: "Laporan Kegunaan anggaran desa secara transparan",
tanggal: "20 Januari 2024",
unduh: <IconDownload size={20} />
},
{
id: 3,
nomer: '3',
jenis: "Program & Kegiatan",
deskripsi: "Informasi mengenai program pembangunan & kegiatan desa",
tanggal: "30 Januari 2024",
unduh: <IconDownload size={20} />
},
]
function Page() {
const rows = dataTable.map((element) => (
<TableTr key={element.jenis}>
<TableTd ta={'center'}>{element.nomer}</TableTd>
<TableTd >{element.jenis}</TableTd>
<TableTd>{element.deskripsi}</TableTd>
<TableTd>{element.tanggal}</TableTd>
<TableTd ta={'center'}>
<ActionIcon c={colors['blue-button']} variant='transparent'>
{element.unduh}
</ActionIcon>
</TableTd>
</TableTr>
))
const listData = useProxy(stateDaftarInformasiPublik.daftarInformasi)
useShallowEffect(() => {
listData.findMany.load()
}, [])
if (!listData.findMany.data) return <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<Skeleton h={40} />
</Box>
<Skeleton h={40}/>
<Skeleton h={40}/>
<Box px={{ base: 'md', md: 100 }}>
<Skeleton h={40} />
</Box>
</Stack>
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
@@ -71,10 +48,18 @@ function Page() {
<TableTh ta={'center'}>Jenis Informasi</TableTh>
<TableTh ta={'center'}>Deskripsi</TableTh>
<TableTh ta={'center'}>Tanggal Publikasi</TableTh>
<TableTh ta={'center'}>Unduh</TableTh>
</TableTr>
</TableThead>
<TableTbody bg={colors['white-1']}>{rows}</TableTbody>
<TableTbody bg={colors['white-1']}>
{listData.findMany.data?.map((item) => (
<TableTr key={item.id}>
<TableTd ta={'center'}>{item.nomor}</TableTd>
<TableTd>{item.jenisInformasi}</TableTd>
<TableTd dangerouslySetInnerHTML={{ __html: item.deskripsi }}></TableTd>
<TableTd>{item.tanggal}</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Stack>
<Text pt={20} fz={'h4'} fw={"bold"}>Kontak PPID</Text>

87
src/app/darmasaba/(pages)/ppid/ikm-desa-darmasaba/grafik_berdasarkan_jenis_kelamin/page.tsx Normal file
View File

@@ -0,0 +1,87 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
'use client'
import React, { useEffect, useState } from 'react';
import { Box, Center, Flex, Skeleton, Stack, Text, Title } from '@mantine/core';
import { Cell, Pie, PieChart } from 'recharts';
import colors from '@/con/colors';
import { useShallowEffect } from '@mantine/hooks';
import { useProxy } from 'valtio/utils';
import stateGrafikBerdasarkanJenisKelamin from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanJenisKelamin';
function GrafikBerdasarkanJenisKelamin() {
const grafikBerdasarkanJenisKelamin = useProxy(stateGrafikBerdasarkanJenisKelamin.grafikBerdasarkanJenisKelamin)
const [mounted, setMounted] = useState(false);
const [donutData, setDonutData] = useState<any[]>([]);
useEffect(() => {
setMounted(true);
}, [])
const updateChartData = (data: any) => {
if (data && data.length > 0) {
const totalLaki = data.reduce((acc: number, cur: any) => acc + Number(cur.laki || 0), 0);
const totalPerempuan = data.reduce((acc: number, cur: any) => acc + Number(cur.perempuan || 0), 0);
setDonutData([
{ name: 'Laki-laki', value: totalLaki, color: colors['blue-button'], key: 'laki-laki' },
{ name: 'Perempuan', value: totalPerempuan, color: '#FF6384', key: 'perempuan' }
]);
}
};
useShallowEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
await grafikBerdasarkanJenisKelamin.findMany.load();
if (grafikBerdasarkanJenisKelamin.findMany.data) {
updateChartData(grafikBerdasarkanJenisKelamin.findMany.data);
}
};
if(!grafikBerdasarkanJenisKelamin.findMany.data) return <Stack>
<Title pb={10} order={3}>Grafik Berdasarkan Jenis Kelamin Responden</Title>
<Skeleton h={500} />
</Stack>
return (
<Stack gap={"xl"}>
<Title pb={10} order={3}>Grafik Berdasarkan Jenis Kelamin Responden</Title>
{mounted && donutData.length > 0 && (
<Box style={{ width: '100%', height: 'auto', minHeight: 300 }}>
<Center>
<PieChart
width={1000} height={530}
data={donutData}
>
<Pie
dataKey="value"
nameKey="name"
data={donutData}
innerRadius={120}
outerRadius={230}
label={true}
>
{donutData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={entry.color} />
))}
</Pie>
</PieChart>
</Center>
<Flex gap={"md"} align={"center"}>
<Box bg={'#FF6384'} w={20} h={20} />
<Text>Perempuan: {donutData.find((entry) => entry.name === 'Perempuan')?.value}</Text>
</Flex>
<Flex gap={"md"} align={"center"}>
<Box bg={colors['blue-button']} w={20} h={20} />
<Text>Laki-laki: {donutData.find((entry) => entry.name === 'Laki-laki')?.value}</Text>
</Flex>
</Box>
)}
</Stack>
);
}
export default GrafikBerdasarkanJenisKelamin;

96
src/app/darmasaba/(pages)/ppid/ikm-desa-darmasaba/grafik_berdasarkan_pilihan_responden/page.tsx Normal file
View File

@@ -0,0 +1,96 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
'use client'
import stateGrafikResponden from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanResponden';
import colors from '@/con/colors';
import { Stack, Title, Box, Center, Flex, Text, Skeleton } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import React, { useEffect, useState } from 'react';
import { PieChart, Pie, Cell } from 'recharts';
import { useProxy } from 'valtio/utils';
function GrafikBerdasarkanResponden() {
const grafikBerdasarkanResponden = useProxy(stateGrafikResponden.grafikBerdasarkanResponden)
const [donutData, setDonutData] = useState<any[]>([]);
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, [])
const updateChartData = (data: any) => {
if (data && data.length > 0) {
const totalSangatBaik = data.reduce((acc: number, cur: any) => acc + Number(cur.sangatbaik || 0), 0);
const totalBaik = data.reduce((acc: number, cur: any) => acc + Number(cur.baik || 0), 0);
const totalKurangBaik = data.reduce((acc: number, cur: any) => acc + Number(cur.kurangbaik || 0), 0);
const totalTidakBaik = data.reduce((acc: number, cur: any) => acc + Number(cur.tidakbaik || 0), 0);
setDonutData([
{ name: 'sangatbaik', value: totalSangatBaik, color: colors['blue-button'], key: 'sangatbaik' },
{ name: 'baik', value: totalBaik, color: '#10A85AFF', key: 'baik' },
{ name: 'kurangbaik', value: totalKurangBaik, color: '#B3AA12FF', key: 'kurangbaik' },
{ name: 'tidakbaik', value: totalTidakBaik, color: '#B21313FF', key: 'tidakbaik' }
]);
}
};
useShallowEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
await grafikBerdasarkanResponden.findMany.load();
if (grafikBerdasarkanResponden.findMany.data) {
updateChartData(grafikBerdasarkanResponden.findMany.data);
}
};
if (!grafikBerdasarkanResponden.findMany.data) return <Stack>
<Title pb={10} order={3}>Grafik Berdasarkan Responden</Title>
<Skeleton h={500} />
</Stack>
return (
<Stack>
<Title pb={10} order={3}>Grafik Berdasarkan Responden</Title>
{mounted && donutData.length > 0 && (
<Box style={{ width: '100%', height: 'auto', minHeight: 300 }}>
<Center>
<PieChart
width={1000} height={530}
data={donutData}
>
<Pie
dataKey="value"
nameKey="name"
data={donutData}
innerRadius={120}
outerRadius={230}
label={true}
>
{donutData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={entry.color} />
))}
</Pie>
</PieChart>
</Center>
<Flex gap={"md"} align={"center"}>
<Box bg={colors['blue-button']} w={20} h={20} />
<Text>Sangat Baik: {donutData.find((entry) => entry.name === 'sangatbaik')?.value}</Text>
</Flex>
<Flex gap={"md"} align={"center"}>
<Box bg={'#10A85AFF'} w={20} h={20} />
<Text>Baik: {donutData.find((entry) => entry.name === 'baik')?.value}</Text>
</Flex>
<Flex gap={"md"} align={"center"}>
<Box bg={'#B3AA12FF'} w={20} h={20} />
<Text>Kurang Baik: {donutData.find((entry) => entry.name === 'kurangbaik')?.value}</Text>
</Flex>
<Flex gap={"md"} align={"center"}>
<Box bg={'#B21313FF'} w={20} h={20} />
<Text>Tidak Baik: {donutData.find((entry) => entry.name === 'tidakbaik')?.value}</Text>
</Flex>
</Box>
)}
</Stack>
);
}
export default GrafikBerdasarkanResponden;

97
src/app/darmasaba/(pages)/ppid/ikm-desa-darmasaba/grafik_berdasarkan_umur_responden/page.tsx Normal file
View File

@@ -0,0 +1,97 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
'use client'
import stateGrafikBerdasarkanUmur from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanUmur';
import colors from '@/con/colors';
import { Stack, Title, Box, Center, Flex, Text, Skeleton } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import React, { useEffect, useState } from 'react';
import { PieChart, Pie, Cell } from 'recharts';
import { useProxy } from 'valtio/utils';
function GrafikBerdasarakanUmur() {
const grafikBerdasarkanUmur = useProxy(stateGrafikBerdasarkanUmur.grafikBerdasarkanUmur)
const [donutData, setDonutData] = useState<any[]>([]);
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
const updateChartData = (data: any) => {
if (data && data.length > 0) {
const totalRemaja = data.reduce((acc: number, cur: any) => acc + Number(cur.remaja || 0), 0);
const totalDewasa = data.reduce((acc: number, cur: any) => acc + Number(cur.dewasa || 0), 0);
const totalOrangtua = data.reduce((acc: number, cur: any) => acc + Number(cur.orangtua || 0), 0);
const totalLansia = data.reduce((acc: number, cur: any) => acc + Number(cur.lansia || 0), 0);
setDonutData([
{ name: 'Remaja', value: totalRemaja, color: colors['blue-button'], key: 'remaja' },
{ name: 'Dewasa', value: totalDewasa, color: '#D32711FF', key: 'dewasa' },
{ name: 'Orangtua', value: totalOrangtua, color: '#B46B04FF', key: 'orangtua' },
{ name: 'Lansia', value: totalLansia, color: '#038617FF', key: 'lansia' }
]);
}
};
useShallowEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
await grafikBerdasarkanUmur.findMany.load();
if (grafikBerdasarkanUmur.findMany.data) {
updateChartData(grafikBerdasarkanUmur.findMany.data);
}
}
if(!grafikBerdasarkanUmur.findMany.data) return <Stack>
<Title pb={10} order={3}>Grafik Berdasarkan Umur Responden</Title>
<Skeleton h={500} />
</Stack>
return (
<Stack>
<Title pb={10} order={3}>Grafik Berdasarkan Umur Responden</Title>
{mounted && donutData.length > 0 && (
<Box style={{ width: '100%', height: 'auto', minHeight: 300 }}>
<Center>
<PieChart
width={1000} height={530}
data={donutData}
>
<Pie
dataKey="value"
nameKey="name"
data={donutData}
innerRadius={120}
outerRadius={230}
label={true}
>
{donutData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={entry.color} />
))}
</Pie>
</PieChart>
</Center>
<Flex gap={"md"} align={"center"}>
<Box bg={colors['blue-button']} w={20} h={20} />
<Text>17 - 25 tahun: {donutData.find((entry) => entry.name === 'remaja')?.value}</Text>
</Flex>
<Flex gap={"md"} align={"center"}>
<Box bg={'#D32711FF'} w={20} h={20} />
<Text>26 - 45 tahun: {donutData.find((entry) => entry.name === 'dewasa')?.value}</Text>
</Flex>
<Flex gap={"md"} align={"center"}>
<Box bg={'#B46B04FF'} w={20} h={20} />
<Text>46 - 60 tahun: {donutData.find((entry) => entry.name === 'orangtua')?.value}</Text>
</Flex>
<Flex gap={"md"} align={"center"}>
<Box bg={'#038617FF'} w={20} h={20} />
<Text>di atas 60 tahun: {donutData.find((entry) => entry.name === 'lansia')?.value}</Text>
</Flex>
</Box>
)}
</Stack>
);
}
export default GrafikBerdasarakanUmur;

57
src/app/darmasaba/(pages)/ppid/ikm-desa-darmasaba/grafik_hasil_kepuasan_masyarakat/page.tsx Normal file
View File

@@ -0,0 +1,57 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
'use client'
import stateGrafikHasilKepuasanMasyarakat from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikHasilKepuasan';
import colors from '@/con/colors';
import { Box, Skeleton, Stack, Text, Title } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import React, { useEffect, useState } from 'react';
import { BarChart, Tooltip, XAxis, YAxis, Legend, Bar } from 'recharts';
import { useProxy } from 'valtio/utils';
function GrafikHasilKepuasan() {
const grafikHasilKepuasan = useProxy(stateGrafikHasilKepuasanMasyarakat.grafikHasilKepuasanMasyarakat)
const [chartData, setChartData] = useState<any[]>([]);
const [mounted, setMounted] = useState(false);
const isTablet = useMediaQuery('(max-width: 1024px)')
const isMobile = useMediaQuery('(max-width: 768px)')
useEffect(() => {
setMounted(true);
}, [])
useShallowEffect(() => {
const fetchData = async () => {
await grafikHasilKepuasan.findMany.load();
if (grafikHasilKepuasan.findMany.data && grafikHasilKepuasan.findMany.data.length > 0) {
setChartData(grafikHasilKepuasan.findMany.data);
}
};
fetchData();
}, []);
if(!grafikHasilKepuasan.findMany.data) return <Stack>
<Title pb={10} order={3}>Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik</Title>
<Skeleton h={500} />
</Stack>
return (
<Stack gap={"xl"}>
<Text fw={"bold"} fz={{ base: 'h4', md: 'h3' }} ta={"center"}>
Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik
</Text>
<Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
{mounted && chartData.length > 0 && (
<BarChart width={isMobile ? 300 : isTablet ? 400 : 450} height={380} data={chartData} >
<XAxis dataKey="label" />
<YAxis />
<Tooltip />
<Legend style={{justifyContent: 'center'}} />
<Bar dataKey="kepuasan" fill={colors['blue-button']} name="Kepuasan" />
</BarChart>
)}
</Box>
</Stack>
);
}
export default GrafikHasilKepuasan;

140
src/app/darmasaba/(pages)/ppid/ikm-desa-darmasaba/page.tsx
View File

@@ -1,38 +1,11 @@
import colors from '@/con/colors';
import { Stack, Box, Paper, Text, Center, Flex, ColorSwatch, } from '@mantine/core';
import React from 'react';
import { Box, Paper, Stack, Text } from '@mantine/core';
import BackButton from '../../desa/layanan/_com/BackButto';
import { BarChart, DonutChart } from '@mantine/charts';
import GrafikBerdasarkanJenisKelamin from './grafik_berdasarkan_jenis_kelamin/page';
import GrafikBerdasarkanResponden from './grafik_berdasarkan_pilihan_responden/page';
import GrafikBerdasarakanUmur from './grafik_berdasarkan_umur_responden/page';
import GrafikHasilKepuasan from './grafik_hasil_kepuasan_masyarakat/page';
const dataBar = [
{ pelayanan: 'Persyaratan', kepuasan: 90 },
{ pelayanan: 'Prosedur', kepuasan: 98 },
{ pelayanan: 'Kecepatan', kepuasan: 92 },
{ pelayanan: 'Biaya / Tarif', kepuasan: 85 },
{ pelayanan: 'Produk Layanan', kepuasan: 89 },
{ pelayanan: 'Kompetensi Pelaksana', kepuasan: 91 },
{ pelayanan: 'Perilaku Pelaksana', kepuasan: 90 },
{ pelayanan: 'Penanganan Pengaduan', kepuasan: 93 },
{ pelayanan: 'Sarana dan Prasarana', kepuasan: 91 },
]
const dataJenisKelamin = [
{ name: 'Perempuan', value: 90, color: '#3291CB' },
{ name: 'Laki - Laki', value: 10, color: colors['blue-button'] },
]
const dataResponden = [
{ name: 'Sangat Baik', value: 60, color: 'green' },
{ name: 'Baik', value: 20, color: 'blue' },
{ name: 'Kurang Baik', value: 10, color: 'orange' },
{ name: 'Tidak Baik', value: 10, color: 'red' },
]
const dataUmur = [
{ name: '17 - 25 tahun', value: 60, color: 'green' },
{ name: '26 - 45 tahun', value: 20, color: 'blue' },
{ name: '46 - 60 tahun', value: 10, color: 'orange' },
{ name: 'di atas 60 tahun', value: 10, color: 'red' },
]
function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
@@ -48,116 +21,23 @@ function Page() {
</Text>
</Box>
<Box px={{ base: "md", md: 100 }}>
<Paper p={"xl"} bg={colors['white-trans-1']}>
<Text fw={"bold"} fz={{ base: 'h4', md: 'h3' }} ta={"center"}>
Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik
</Text>
<BarChart
py={30}
h={500}
data={dataBar}
dataKey='pelayanan'
orientation='vertical'
yAxisProps={{ width: 80 }}
barProps={{ radius: 10 }}
series={[{ name: 'kepuasan', color: colors['blue-button'] }]}
/>
<Paper bg={colors['white-1']} p={'xl'}>
<GrafikHasilKepuasan />
</Paper>
</Box>
<Box px={{ base: "md", md: 100 }}>
<Paper p={"xl"} bg={colors['white-trans-1']}>
<Text fw={"bold"} fz={{ base: 'h4', md: 'h3' }} ta={"center"}>
Grafik Berdasarkan Jenis Kelamin Responden
</Text>
<Center>
<DonutChart size={250} thickness={30} withLabelsLine labelsType="percent" withLabels data={dataJenisKelamin} />
</Center>
<Flex gap={"md"} justify={"center"} align={"center"}>
<Box>
<Flex gap={10} align={"center"}>
<Text>Perempuan</Text>
<ColorSwatch color='#3291CB' />
</Flex>
</Box>
<Box>
<Flex gap={10} align={"center"}>
<Text>Laki - Laki</Text>
<ColorSwatch color={colors['blue-button']} />
</Flex>
</Box>
</Flex>
<GrafikBerdasarkanJenisKelamin/>
</Paper>
</Box>
<Box px={{ base: "md", md: 100 }}>
<Paper p={"xl"} bg={colors['white-trans-1']}>
<Text fw={"bold"} fz={{ base: 'h4', md: 'h3' }} ta={"center"}>
Grafik Berdasarkan Pilihan Responden
</Text>
<Center>
<DonutChart size={250} thickness={30} withLabelsLine labelsType="percent" withLabels data={dataResponden} />
</Center>
<Flex gap={"md"} justify={"center"} align={"center"}>
<Box>
<Flex gap={{ base: 5, md: 10 }} align={"center"}>
<Text fz={{ base: 'xs', md: 'lg' }}>Sangat Baik</Text>
<ColorSwatch color='#40BE57' />
</Flex>
</Box>
<Box>
<Flex gap={{ base: 5, md: 10 }} align={"center"}>
<Text fz={{ base: 'xs', md: 'lg' }}>Baik</Text>
<ColorSwatch color={'#228AE7'} />
</Flex>
</Box>
<Box>
<Flex gap={{ base: 5, md: 10 }} align={"center"}>
<Text fz={{ base: 'xs', md: 'lg' }}>Kurang Baik</Text>
<ColorSwatch color={'#FD7F12'} />
</Flex>
</Box>
<Box>
<Flex gap={{ base: 5, md: 10 }} align={"center"}>
<Text fz={{ base: 'xs', md: 'lg' }}>Tidak Baik</Text>
<ColorSwatch color={'#F85253'} />
</Flex>
</Box>
</Flex>
<GrafikBerdasarkanResponden/>
</Paper>
</Box>
<Box px={{ base: "md", md: 100 }}>
<Paper p={"xl"} bg={colors['white-trans-1']}>
<Text fw={"bold"} fz={{ base: 'h4', md: 'h3' }} ta={"center"}>
Grafik Berdasarkan Umur Responden
</Text>
<Center>
<DonutChart size={250} thickness={30} withLabelsLine labelsType="percent" withLabels data={dataUmur} />
</Center>
<Flex gap={"md"} justify={"center"} align={"center"}>
<Box>
<Flex gap={{ base: 0, md: 10 }} align={"center"}>
<Text fz={{ base: 'xs', md: 'lg' }}>17 – 25 tahun</Text>
<ColorSwatch color='#40BE57' />
</Flex>
</Box>
<Box>
<Flex gap={{ base: 0, md: 10 }} align={"center"}>
<Text fz={{ base: 'xs', md: 'lg' }}>26 – 45 tahun</Text>
<ColorSwatch color={'#228AE7'} />
</Flex>
</Box>
<Box>
<Flex gap={{ base: 0, md: 10 }} align={"center"}>
<Text fz={{ base: 'xs', md: 'lg' }}>46 – 60 tahun</Text>
<ColorSwatch color={'#FD7F12'} />
</Flex>
</Box>
<Box>
<Flex gap={{ base: 0, md: 10 }} align={"center"}>
<Text fz={{ base: 'xs', md: 'lg' }}>di atas 60 tahun</Text>
<ColorSwatch color={'#F85253'} />
</Flex>
</Box>
</Flex>
<GrafikBerdasarakanUmur/>
</Paper>
</Box>
</Stack>

48
src/app/darmasaba/(pages)/ppid/permohonan-informasi-publik/jenis_infromasi/jenisInformasiSelector.tsx Normal file
View File

@@ -0,0 +1,48 @@
// components/jenisInformasiSelector.tsx
'use client';
import { Skeleton, Group, Select } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { Prisma } from '@prisma/client';
import React from 'react';
import { useProxy } from 'valtio/utils';
import statePermohonanInformasi from '@/app/admin/(dashboard)/_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
export default function JenisInformasiSelector({ onChange }: {
onChange: (value: Prisma.JenisInformasiDimintaGetPayload<{
select: {
id: true;
name: true
}
}>) => void;
}) {
const jenisInformasiState = useProxy(statePermohonanInformasi);
useShallowEffect(() => {
jenisInformasiState.jenisInformasiDiminta.findMany.load();
}, []);
if (!jenisInformasiState.jenisInformasiDiminta.findMany.data) {
return <Skeleton h={40} />;
}
// Add a check for data before mapping
const data = jenisInformasiState.jenisInformasiDiminta.findMany.data;
if (!data) return <Skeleton h={40} />;
return (
<Group>
<Select
placeholder='pilih jenis informasi'
label='Jenis Informasi'
data={data.map((item) => ({
value: item.id,
label: item.name,
}))}
onChange={(v) => {
const selectedData = data.find((item) => item.id === v);
if (selectedData) onChange(selectedData);
}}
/>
</Group>
);
}

46
src/app/darmasaba/(pages)/ppid/permohonan-informasi-publik/memperoleh_informasi/memperolehInfromasi.tsx Normal file
View File

@@ -0,0 +1,46 @@
import statePermohonanInformasi from '@/app/admin/(dashboard)/_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
import { Group, Select, Skeleton } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { Prisma } from '@prisma/client';
import React from 'react';
import { useProxy } from 'valtio/utils';
function MemperolehInformasi({ onChange }: {
onChange: (value: Prisma.CaraMemperolehInformasiGetPayload<{
select: {
id: true,
name: true
}
}>) => void
}) {
const memperolehInformasiState = useProxy(statePermohonanInformasi)
useShallowEffect(() => {
memperolehInformasiState.caraMemperolehInformasi.findMany.load()
}, [])
if (!memperolehInformasiState.caraMemperolehInformasi.findMany.data)
return <Skeleton h={40} />
const data = memperolehInformasiState.caraMemperolehInformasi.findMany.data;
if (!data) return <Skeleton h={40} />
return (
<Group>
<Select
placeholder='pilih cara memperoleh informasi'
label={"Cara Memperoleh Informasi"}
data={data.map((item) => ({
value: item.id,
label: item.name,
}))}
onChange={(v) => {
const selectedData = data.find((item) => item.id === v);
if (selectedData) onChange(selectedData);
}}
/>
</Group>
);
}
export default MemperolehInformasi;

338
src/app/darmasaba/(pages)/ppid/permohonan-informasi-publik/page.tsx
View File

@@ -1,123 +1,39 @@
'use client'
import statePermohonanInformasi from '@/app/admin/(dashboard)/_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
import colors from '@/con/colors';
import { ActionIcon, Box, Button, Center, Checkbox, Combobox, ComboboxOption, Group, Input, InputBase, Paper, SimpleGrid, Stack, Text, Textarea, TextInput, useCombobox } from '@mantine/core';
import { ActionIcon, Box, Button, Center, Checkbox, Group, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { IconDownload } from '@tabler/icons-react';
import BackButton from '../../desa/layanan/_com/BackButto';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import BackButton from '../../desa/layanan/_com/BackButto';
import JenisInformasiSelector from './jenis_infromasi/jenisInformasiSelector';
import MemperolehInformasi from './memperoleh_informasi/memperolehInfromasi';
import MemperolehSalinan from './salinan_informasi/salinanInformasi';
const data = [
{
id: 1,
number: '1',
title: "Langkah 1",
desc: "Pemohon informasi publik mengajukan permohonan informasi kepada badan publik baik langsung maupun melalui surat elektronik",
},
{
id: 2,
number: '2',
title: "Langkah 2",
desc: "Isi formulir permohonan informasi dengan data diri (nama, alamat, telepon), jenis, format, dan cara penyampaian informasi, serta lampiran fotokopi kartu identitas.",
},
{
id: 3,
number: '3',
title: "Langkah 3",
desc: "PPID akan memproses permohonan sesuai dengan ketentuan",
},
{
id: 4,
number: '4',
title: "Langkah 4",
desc: "Petugas PPID menyampaikan informasi sesuai permohonan kepada pemohon informasi.",
},
]
{ id: 1, number: '1', title: "Langkah 1", desc: "Pemohon informasi publik mengajukan permohonan informasi kepada badan publik baik langsung maupun melalui surat elektronik" },
{ id: 2, number: '2', title: "Langkah 2", desc: "Isi formulir permohonan informasi dengan data diri (nama, alamat, telepon), jenis, format, dan cara penyampaian informasi, serta lampiran fotokopi kartu identitas." },
{ id: 3, number: '3', title: "Langkah 3", desc: "PPID akan memproses permohonan sesuai dengan ketentuan" },
{ id: 4, number: '4', title: "Langkah 4", desc: "Petugas PPID menyampaikan informasi sesuai permohonan kepada pemohon informasi." },
];
const jenisInformasi = [
{
id: 1,
jenis: 'Keuangan Desa'
},
{
id: 2,
jenis: 'Pembangunan Desa'
},
{
id: 3,
jenis: 'Data Demografi'
},
{
id: 4,
jenis: 'Lainnya'
},
]
const memperolehInformasi = [
{
id: 1,
jenis: 'Melihat/Membaca/Mendengarkan/Mencatat'
},
{
id: 2,
jenis: 'Mendapatkan Salinan Informasi (Hardcopy)'
},
{
id: 3,
jenis: 'Mendapatkan Salinan Informasi (Softcopy)'
}
]
const mendapatkanInformasi = [
{
id: 1,
jenis: 'Mengambil Langsung'
},
{
id: 2,
jenis: 'Dikirim via Post'
},
{
id: 3,
jenis: 'Dikirim via Email'
}
]
function Page() {
const combobox = useCombobox({
onDropdownClose: () => combobox.resetSelectedOption(),
});
const permohonanInformasiPublikState = useProxy(statePermohonanInformasi);
const router = useRouter();
const combobox2 = useCombobox({
onDropdownClose: () => combobox2.resetSelectedOption(),
});
const submitForms = () => {
const { create } = permohonanInformasiPublikState.statepermohonanInformasiPublik;
const combobox3 = useCombobox({
onDropdownClose: () => combobox3.resetSelectedOption(),
});
if (create.form.name && create.form.nik && create.form.notelp && create.form.alamat && create.form.email &&
create.form.jenisInformasiDimintaId && create.form.caraMemperolehInformasiId && create.form.caraMemperolehSalinanInformasiId) {
create.create();
router.push('/darmasaba/permohonan/berhasil');
} else {
console.log("Validasi gagal, form tidak lengkap");
// Display error message to user
}
};
const [value, setValue] = useState<string | null>(null);
const [value2, setValue2] = useState<string | null>(null);
const [value3, setValue3] = useState<string | null>(null);
const options = jenisInformasi.map((item) => (
<ComboboxOption value={item.jenis} key={item.id}>
{item.jenis}
</ComboboxOption>
))
const options2 = memperolehInformasi.map((item) => (
<ComboboxOption value={item.jenis} key={item.id}>
{item.jenis}
</ComboboxOption>
))
const options3 = mendapatkanInformasi.map((item) => (
<ComboboxOption value={item.jenis} key={item.id}>
{item.jenis}
</ComboboxOption>
))
const router = useRouter()
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
@@ -130,33 +46,20 @@ function Page() {
<Stack gap={'lg'}>
<Paper p={"xl"} bg={colors['white-trans-1']}>
<Text pb={30} ta={'center'} fw={"bold"} fz={{ base: 'h3', md: 'h2' }}>Tata Cara Permohonan</Text>
<SimpleGrid
pb={30}
cols={{
base: 1,
md: 2,
lg: 3,
xl: 4
}}>
{data.map((v, k) => {
return (
<Paper key={k} p={"xl"} bg={colors['blue-button']}>
<Stack justify='space-between'>
<Center>
<ActionIcon bg={colors['white-1']} radius={150} size={50}>
<Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={{ base: "h3", md: "h2" }}>{v.number}</Text>
</ActionIcon>
</Center>
<Text ta={"center"} c={colors['white-1']} fw={"bold"} fz={"h3"}>
{v.title}
</Text>
<Text ta={"center"} c={colors['white-1']} fz={'h4'}>
{v.desc}
</Text>
</Stack>
</Paper>
)
})}
<SimpleGrid pb={30} cols={{ base: 1, md: 2, lg: 3, xl: 4 }}>
{data.map((v, k) => (
<Paper key={k} p={"xl"} bg={colors['blue-button']}>
<Stack justify='space-between'>
<Center>
<ActionIcon bg={colors['white-1']} radius={150} size={50}>
<Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={{ base: "h3", md: "h2" }}>{v.number}</Text>
</ActionIcon>
</Center>
<Text ta={"center"} c={colors['white-1']} fw={"bold"} fz={"h3"}>{v.title}</Text>
<Text ta={"center"} c={colors['white-1']} fz={'h4'}>{v.desc}</Text>
</Stack>
</Paper>
))}
</SimpleGrid>
<Center pb={30}>
<Button fz={"h5"} bg={colors['blue-button']} leftSection={<IconDownload size={20} color={colors['white-1']} />}>
@@ -165,132 +68,45 @@ function Page() {
</Center>
<Group justify='center'>
<Paper p={'xl'} bg={colors['white-1']}>
<Text fw={"bold"} fz={{ base: 'h4', md: 'h3' }} ta={"center"}>Formulir Permohonan Informasi</Text>
<TextInput
styles={{ input: { padding: 20 } }}
py={10}
placeholder='Nama Lengkap'
/>
<TextInput
styles={{ input: { padding: 20 } }}
placeholder='NIK'
/>
<TextInput
styles={{ input: { padding: 20 } }}
py={10}
placeholder='No.Telepon'
/>
<TextInput
styles={{ input: { padding: 20 } }}
placeholder="Alamat"
/>
<TextInput
py={10}
styles={{ input: { padding: 20 } }}
placeholder="Email"
/>
<TextInput
styles={{ input: { padding: 20 } }}
placeholder="Alamat"
/>
{/* ComboBox */}
<Box py={10}>
<Text fz={'sm'}>Jenis Informasi yang diminta</Text>
<Combobox
store={combobox}
withinPortal={false}
onOptionSubmit={(val) => {
setValue(val);
combobox.closeDropdown();
<Stack gap={"xs"}>
<Text fw={"bold"} fz={{ base: 'h4', md: 'h3' }} ta={"center"}>Formulir Permohonan Informasi</Text>
<TextInput label="Nama Lengkap" placeholder="masukkan nama lengkap" onChange={(val) => {
permohonanInformasiPublikState.statepermohonanInformasiPublik.create.form.name = val.target.value;
}} />
<TextInput label="NIK" placeholder="masukkan NIK" onChange={(val) => {
permohonanInformasiPublikState.statepermohonanInformasiPublik.create.form.nik = val.target.value;
}} />
<TextInput label="No.Telp" placeholder="masukkan no telp" onChange={(val) => {
permohonanInformasiPublikState.statepermohonanInformasiPublik.create.form.notelp = val.target.value;
}} />
<TextInput label="Alamat" placeholder="masukkan alamat" onChange={(val) => {
permohonanInformasiPublikState.statepermohonanInformasiPublik.create.form.alamat = val.target.value;
}} />
<TextInput label="Email" placeholder="masukkan email" onChange={(val) => {
permohonanInformasiPublikState.statepermohonanInformasiPublik.create.form.email = val.target.value;
}} />
<JenisInformasiSelector
onChange={(val) => {
permohonanInformasiPublikState.statepermohonanInformasiPublik.create.form.jenisInformasiDimintaId = val.id;
}}
>
<Combobox.Target>
<InputBase
component="button"
type="button"
pointer
rightSection={<Combobox.Chevron />}
onClick={() => combobox.toggleDropdown()}
rightSectionPointerEvents="none"
>
{value || <Input.Placeholder>--Pilih Jenis Informasi--</Input.Placeholder>}
</InputBase>
</Combobox.Target>
<Combobox.Dropdown>
<Combobox.Options>{options}</Combobox.Options>
</Combobox.Dropdown>
</Combobox>
</Box>
<Textarea
placeholder='Tujuan Penggunaan Informasi'
/>
{/* ComboBox2 */}
<Box py={10}>
<Text fz={'sm'}>Cara Memperoleh Informasi</Text>
<Combobox
store={combobox2}
withinPortal={false}
onOptionSubmit={(val) => {
setValue2(val);
combobox2.closeDropdown();
}}
>
<Combobox.Target>
<InputBase
component="button"
type="button"
pointer
rightSection={<Combobox.Chevron />}
onClick={() => combobox2.toggleDropdown()}
rightSectionPointerEvents="none"
>
{value2 || <Input.Placeholder>--Pilih Cara Memperoleh--</Input.Placeholder>}
</InputBase>
</Combobox.Target>
<Combobox.Dropdown>
<Combobox.Options>{options2}</Combobox.Options>
</Combobox.Dropdown>
</Combobox>
</Box>
{/* ComboBox3 */}
<Box pb={10}>
<Text fz={'sm'}>Cara Mendapatkan Salinan Informasi</Text>
<Combobox
store={combobox3}
withinPortal={false}
onOptionSubmit={(val) => {
setValue3(val);
combobox3.closeDropdown();
}}
>
<Combobox.Target>
<InputBase
component="button"
type="button"
pointer
rightSection={<Combobox.Chevron />}
onClick={() => combobox3.toggleDropdown()}
rightSectionPointerEvents="none"
>
{value3 || <Input.Placeholder>--Pilih Cara Mendapatkan--</Input.Placeholder>}
</InputBase>
</Combobox.Target>
<Combobox.Dropdown>
<Combobox.Options>{options3}</Combobox.Options>
</Combobox.Dropdown>
</Combobox>
</Box>
<Box pb={10}>
<Checkbox
label="Saya menyatakan bahwa informasi yang saya berikan adalah benar dan akan menggunakan informasi yang diminta"
/>
</Box>
<Button onClick={() => router.push('/darmasaba/permohonan/berhasil')} bg={"green"} fullWidth>
Kirim Permohonan
</Button>
<MemperolehInformasi
onChange={(val) => {
permohonanInformasiPublikState.statepermohonanInformasiPublik.create.form.caraMemperolehInformasiId = val.id;
}}
/>
<MemperolehSalinan
onChange={(val) => {
permohonanInformasiPublikState.statepermohonanInformasiPublik.create.form.caraMemperolehSalinanInformasiId = val.id;
}}
/>
<Box py={10}>
<Checkbox label="Saya menyatakan bahwa informasi yang saya berikan adalah benar dan akan menggunakan informasi yang diminta" />
</Box>
<Group>
<Button bg={colors['blue-button']} onClick={submitForms}>Kirim Permohonan</Button>
</Group>
</Stack>
</Paper>
</Group>
</Paper>
@@ -300,4 +116,4 @@ function Page() {
);
}
export default Page;
export default Page;

43
src/app/darmasaba/(pages)/ppid/permohonan-informasi-publik/salinan_informasi/salinanInformasi.tsx Normal file
View File

@@ -0,0 +1,43 @@
import statePermohonanInformasi from '@/app/admin/(dashboard)/_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
import { Skeleton, Group, Select } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { Prisma } from '@prisma/client';
import React from 'react';
import { useProxy } from 'valtio/utils';
function MemperolehSalinan({ onChange }: {
onChange: (value: Prisma.CaraMemperolehSalinanInformasiGetPayload<{
select: {
id: true,
name: true
}
}>) => void
}) {
const memperolehSalinanInformasiState = useProxy(statePermohonanInformasi)
useShallowEffect(() => {
memperolehSalinanInformasiState.caraMemperolehSalinanInformasi.findMany.load()
}, [])
if (!memperolehSalinanInformasiState.caraMemperolehSalinanInformasi.findMany.data) return <Skeleton h={40} />
const data = memperolehSalinanInformasiState.caraMemperolehSalinanInformasi.findMany.data
if (!data) return <Skeleton h={40} />
return (
<Group>
<Select
placeholder='pilih cara memperoleh salinan informasi'
label={'Cara Memperoleh Salinan Informasi'}
data={data.map((item) => ({
value: item.id,
label: item.name,
}))}
onChange={(v) => {
const selectedData = data.find((item) => item.id === v);
if (selectedData) onChange(selectedData);
}}
/>
</Group>
);
}
export default MemperolehSalinan;

78
src/app/darmasaba/(pages)/ppid/permohonan-keberatan-informasi-publik/page.tsx
View File

@@ -1,9 +1,12 @@
'use client'
import permohonanKeberatanInformasi from '@/app/admin/(dashboard)/_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi';
import { PPIDTextEditor } from '@/app/admin/(dashboard)/ppid/_com/PPIDTextEditor';
import colors from '@/con/colors';
import { Box, Button, Center, Group, Paper, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
import { Box, Button, Center, Group, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { IconFileCheck, IconForms, IconHourglassOff, IconPhoneRinging } from '@tabler/icons-react';
import BackButton from '../../desa/layanan/_com/BackButto';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import BackButton from '../../desa/layanan/_com/BackButto';
const data = [
{
@@ -32,6 +35,15 @@ const data = [
},
]
function Page() {
const stateKeberatan = useProxy(permohonanKeberatanInformasi)
const submit = () => {
if (stateKeberatan.create.form.name && stateKeberatan.create.form.email && stateKeberatan.create.form.notelp && stateKeberatan.create.form.alasan) {
stateKeberatan.create.create()
router.push('/darmasaba/permohonan/berhasil')
} else {
console.log("Validasi gagal, form tidak lengkap")
}
}
const router = useRouter();
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
@@ -76,33 +88,41 @@ function Page() {
</SimpleGrid>
<Group justify='center'>
<Paper p={'xl'} bg={colors['white-1']}>
<Text fw={"bold"} fz={{ base: 'h4', md: 'h3' }} ta={"center"}>Formulir Permohonan Keberatan</Text>
<TextInput
label='Nama'
styles={{ input: { padding: 20 } }}
py={10}
placeholder='Masukkan nama lengkap'
/>
<TextInput
label='Email'
styles={{ input: { padding: 20 } }}
placeholder='Masukkan email'
/>
<TextInput
label='Nomor Telepon'
styles={{ input: { padding: 20 } }}
py={10}
placeholder='Masukkan nomor telepon'
/>
<Textarea
pb={20}
label='Alasan Keberatan'
styles={{ input: { padding: 20 } }}
placeholder="Alasan keberatan"
/>
<Button onClick={() => router.push('/darmasaba/permohonan/berhasil')} bg={"green"} fullWidth>
Kirim Permohonan
</Button>
<Stack gap={"xs"}>
<Text fw={"bold"} fz={{ base: 'h4', md: 'h3' }} ta={"center"}>Formulir Permohonan Keberatan</Text>
<TextInput
label="Nama"
placeholder="masukkan nama lengkap"
onChange={(val) => {
stateKeberatan.create.form.name = val.target.value
}}
/>
<TextInput
label="Email"
placeholder="masukkan email"
onChange={(val) => {
stateKeberatan.create.form.email = val.target.value
}}
/>
<TextInput
label="Nomor Telepon"
placeholder="masukkan nomor telepon"
onChange={(val) => {
stateKeberatan.create.form.notelp = val.target.value
}}
/>
<Text fz={"sm"}>Alasan Permohonan Keberatan</Text>
<PPIDTextEditor
showSubmit={false}
onChange={(val) => {
stateKeberatan.create.form.alasan = val
}}
/>
<Group>
<Button onClick={submit} bg={'green'}>Kirim Permohonan</Button>
</Group>
</Stack>
</Paper>
</Group>
<Text pt={20} ta={"center"} fz={'h3'} fw={"bold"}>Kontak PPID</Text>