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

Menu Landing Page User

Browse Source 
Submenu Desa Anti Korupsi
This commit is contained in:
nico
2025-08-04 14:09:03 +08:00
parent 1cdff53c56
commit 9d14bb0c56
9 changed files with 228 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/app/darmasaba/(tambahan)/desa-anti-korupsi/(detail)/kearifan-lokal/page.tsx
View File

@@ -1,73 +0,0 @@
import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
import colors from '@/con/colors';
import { Box, Button, Container, Flex, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { IconClipboardText } from '@tabler/icons-react';
const data = [
{
judul: "PENGUATAN PENGAWASAN",
deskripsi: "5.1 ADANYA BUDAYA LOKAL/HUKUM ADAT YANG MENDORONG UPAYA PENCEGAHAN TINDAK PIDANA KORUPSI",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
{
judul: "PENGUATAN PENGAWASAN",
deskripsi: "5.2 ADANYA TOKOH MASYARAKAT, TOKOH AGAMA, TOKOH ADAT, TOKOH PEMUDA, DAN KAUM PEREMPUAN YANG MENDORONG UPAYA PENCEGAHAN TINDAK PIDANA KORUPSI",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
}
]
function Lokal() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={22}>
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
<Container w={{ base: "100%", md: "50%" }}>
<Stack align="center" gap={0}>
<Text fz={"3.4rem"} fw={"bold"} ta={"center"}>
Kearifan Lokal
</Text>
<Text
py={10}
ta={"justify"}
>
Sebagai bagian dari Program Desa Anti Korupsi, Desa Darmasaba menerapkan kearifan lokal sebagai strategi dalam menciptakan pemerintahan desa yang bersih, transparan, dan berintegritas. Kearifan lokal ini menjadi landasan moral dan budaya yang memperkuat nilai-nilai kejujuran, gotong royong, serta kepedulian sosial dalam kehidupan masyarakat. Adapun beberapa Kearifan Lokal :
</Text>
</Stack>
</Container>
<SimpleGrid
px={{ base: "md", md: 100 }}
cols={{
base: 1,
sm: 2,
}}>
{data.map((v, k) => {
return (
<Box
key={k}
>
<Paper p={"lg"} >
<Stack h="100%">
<Text fz={"lg"} ta={"center"} c={colors["blue-button"]}>{v.judul}</Text>
<Flex direction={{ base: "column", md: "row" }} align="center" justify="center" style={{ flex: 1 }}>
<Box mb={{ base: 10, md: 0 }}>
{v.icon}
</Box>
<Stack px={{ base: 0, md: 20 }} gap={10} style={{ flex: 1 }}>
<Text fz={"sm"} ta={"justify"}>{v.deskripsi}</Text>
<Button bg={colors["blue-button"]} radius={"lg"} w="fit-content">Download</Button>
</Stack>
</Flex>
</Stack>
</Paper>
</Box>
);
})}
</SimpleGrid >
</Stack >
);
}
export default Lokal;

88
src/app/darmasaba/(tambahan)/desa-anti-korupsi/(detail)/penguatan-kualitas-pelayanan-publik/page.tsx
View File

@@ -1,88 +0,0 @@
import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
import colors from '@/con/colors';
import { Box, Button, Container, Flex, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { IconClipboardText } from '@tabler/icons-react';
const data = [
{
judul: "PENGUATAN PENGAWASAN",
deskripsi: "3.1 ADANYA LAYANAN PENGADUAN BAGI MASYARAKAT",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
{
judul: "PENGUATAN PENGAWASAN",
deskripsi: "3.2 ADANYA SURVEY KEPUASAN MASYARAKAT (SKM) TERHADAP LAYANAN PEMERINTAH DESA",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
{
judul: "PENGUATAN PENGAWASAN",
deskripsi: "3.3 ADANYA KETERBUKAAN AKSES MASYARAKAT TERHADAP INFORMASI LAYANAN PEMERINTAH DESA (KESEHATAN, PENDIDIKAN, SOSIAL, LINGKUNGAN, TRANTIBUMLINMAS, PEKERJAAN UMUM) PEMBANGUNAN, KEPENDUDUKAN, KEUANGAN, DAN PELAYANAN LAINNYA",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
{
judul: "PENGUATAN PENGAWASAN",
deskripsi: "3.4 ADANYA MEDIA INFORMASI TENTANG APBDES DI BALAI DESA DAN/ATAU TEMPAT LAIN YANG MUDAH DIAKSES OLEH MASYARAKAT",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
{
judul: "PENGUATAN PENGAWASAN",
deskripsi: "3.5 ADANYA MAKLUMAT PELAYANAN",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
]
function Pelayanan() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={22}>
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
<Container w={{ base: "100%", md: "50%" }}>
<Stack align="center" gap={0}>
<Text fz={"3.4rem"} fw={"bold"} ta={"center"}>
Penguatan Kualitas Pelayanan Publik
</Text>
<Text
py={10}
ta={"justify"}
>
Sebagai bagian dari Program Desa Anti Korupsi, Desa Darmasaba berkomitmen untuk meningkatkan kualitas pelayanan publik agar lebih transparan, cepat, dan bebas dari pungutan liar. Penguatan ini bertujuan untuk memastikan masyarakat mendapatkan pelayanan yang profesional, akuntabel, dan sesuai dengan standar yang telah ditetapkan. Adapun beberapa Penguatan Kualitas Pelayanan Publik :
</Text>
</Stack>
</Container>
<SimpleGrid
px={{ base: "md", md: 100 }}
cols={{
base: 1,
sm: 2,
}}>
{data.map((v, k) => {
return (
<Box
key={k}
>
<Paper p={"lg"} h="100%">
<Stack h="100%">
<Text fz={"lg"} ta={"center"} c={colors["blue-button"]}>{v.judul}</Text>
<Flex direction={{ base: "column", md: "row" }} align="center" justify="center" style={{ flex: 1 }}>
<Box mb={{ base: 10, md: 0 }}>
{v.icon}
</Box>
<Stack px={{ base: 0, md: 20 }} gap={10} style={{ flex: 1 }}>
<Text fz={"sm"} ta={"justify"}>{v.deskripsi}</Text>
<Button bg={colors["blue-button"]} radius={"lg"} w="fit-content">Download</Button>
</Stack>
</Flex>
</Stack>
</Paper>
</Box>
);
})}
</SimpleGrid >
</Stack >
);
}
export default Pelayanan;

75
src/app/darmasaba/(tambahan)/desa-anti-korupsi/(detail)/penguatan-partisipasi-masyarakat/page.tsx
View File

@@ -1,75 +0,0 @@
import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
import colors from '@/con/colors';
import { Box, Button, Container, Flex, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { IconClipboardText } from '@tabler/icons-react';
const data = [
{
judul: "PENGUATAN TATA LAKSANA",
deskripsi: "4.1 ADANYA PARTISIPASI DAN KETERLIBATAN MASYARAKAT DALAM PENYUSUNAN RKP DESA",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
{
judul: "PENGUATAN TATA LAKSANA",
deskripsi: "4.2 ADANYA KESADARAN MASYARAKAT DALAM MENCEGAH TERJADINYA PRAKTIK GRATIFIKASI, SUAP DAN KONFLIK KEPENTINGAN",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
{
judul: "PENGUATAN TATA LAKSANA",
deskripsi: "4.3 ADANYA KETERLIBATAN LEMBAGA KEMASYARAKATAN DALAM PELAKSANAAN PEMBANGUNAN DESA",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
]
function Partisipasi() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={22}>
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
<Container w={{ base: "100%", md: "50%" }}>
<Stack align="center" gap={0}>
<Text fz={"3.4rem"} fw={"bold"} ta={"center"}>
Penguatan Tata Laksana
</Text>
<Text
py={10}
ta={"justify"}
>
Sebagai bagian dari Program Desa Anti Korupsi, Desa Darmasaba menekankan penguatan partisipasi masyarakat agar warga dapat ikut serta dalam pengawasan, pengambilan keputusan, dan pelaksanaan pembangunan desa yang transparan dan akuntabel. Adapun beberapa Penguatan Partisipasi Masyarakat :
</Text>
</Stack>
</Container>
<SimpleGrid
px={{ base: "md", md: 100 }}
cols={{
base: 1,
sm: 2,
}}>
{data.map((v, k) => {
return (
<Box
key={k}
>
<Paper p={"lg"} >
<Stack h="100%">
<Text fz={"lg"} ta={"center"} c={colors["blue-button"]}>{v.judul}</Text>
<Flex direction={{ base: "column", md: "row" }} align="center" justify="center" style={{ flex: 1 }}>
<Box mb={{ base: 10, md: 0 }}>
{v.icon}
</Box>
<Stack px={{ base: 0, md: 20 }} gap={10} style={{ flex: 1 }}>
<Text fz={"sm"} ta={"justify"}>{v.deskripsi}</Text>
<Button bg={colors["blue-button"]} radius={"lg"} w="fit-content">Download</Button>
</Stack>
</Flex>
</Stack>
</Paper>
</Box>
);
})}
</SimpleGrid >
</Stack >
);
}
export default Partisipasi;

78
src/app/darmasaba/(tambahan)/desa-anti-korupsi/(detail)/penguatan-pengawasan/page.tsx
View File

@@ -1,78 +0,0 @@
import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
import colors from '@/con/colors';
import { Box, Button, Container, Flex, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { IconClipboardText } from '@tabler/icons-react';
const data = [
{
judul: "PENGUATAN PENGAWASAN",
deskripsi: "2.1 ADANYA KEGIATAN PENGAWASAN DAN EVALUASI KINERJA PERANGKAT DESA",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
{
judul: "PENGUATAN PENGAWASAN",
deskripsi: "2.2 ADANYA TINDAK LANJUT HASIL PEMBINAAN, PETUNJUK, ARAH, PENGAWASAN, DAN PEMERIKSAAN DARI PEMERINTAH PUSAT/DAERAH",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
{
judul: "PENGUATAN PENGAWASAN",
deskripsi: "2.3 TIDAK ADANYA APARATUR DESA DALAM 3(TIGA) TAHUN TERAKHIR YANG TERJERAT TINDAKAN PIDANA KORUPSI",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
]
function Pengawasan() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={22}>
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
<Container w={{ base: "100%", md: "50%" }}>
<Stack align="center" gap={0}>
<Text fz={"3.4rem"} fw={"bold"} ta={"center"}>
Penguatan Pengawasan
</Text>
<Text
py={10}
ta={"justify"}
>
Sebagai bagian dari Program Desa Anti Korupsi, Desa Darmasaba menerapkan penguatan pengawasan untuk memastikan transparansi dan akuntabilitas dalam pengelolaan pemerintahan desa. Sistem pengawasan ini melibatkan berbagai pihak, termasuk aparat desa, masyarakat, dan lembaga terkait, agar tidak ada celah bagi praktik korupsi. Adapun beberapa Penguatan Pengawasan :
</Text>
</Stack>
</Container>
<SimpleGrid
px={{ base: "md", md: 100 }}
cols={{
base: 1,
sm: 2,
}}>
{data.map((v, k) => {
return (
<Box
key={k}
>
<Paper p={"lg"} >
<Stack h="100%">
<Text fz={"lg"} ta={"center"} c={colors["blue-button"]}>{v.judul}</Text>
<Flex direction={{ base: "column", md: "row" }} align="center" justify="center" style={{ flex: 1 }}>
<Box mb={{ base: 10, md: 0 }}>
{v.icon}
</Box>
<Stack px={{ base: 0, md: 20 }} gap={10} style={{ flex: 1 }}>
<Text fz={"sm"} ta={"justify"}>{v.deskripsi}</Text>
<Button bg={colors["blue-button"]} radius={"lg"} w="fit-content">Download</Button>
</Stack>
</Flex>
</Stack>
</Paper>
</Box>
);
})}
</SimpleGrid >
</Stack >
);
}
export default Pengawasan;

90
src/app/darmasaba/(tambahan)/desa-anti-korupsi/(detail)/penguatan-tata-laksana/page.tsx
View File

@@ -1,90 +0,0 @@
import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
import colors from '@/con/colors';
import { Box, Button, Container, Flex, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { IconClipboardText } from '@tabler/icons-react';
const data = [
{
judul: "PENGUATAN TATA LAKSANA",
deskripsi: "1.1 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PERENCANAAN, PELAKSANAAN, PENATAUSAHAAN DAN PERTANGGUNG JAWABAN APBDES BESERTA IMPLEMENTASINYA",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
{
judul: "PENGUATAN TATA LAKSANA",
deskripsi: "1.2 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP MENGENAI MEKANISME EVALUASI KINERJA PERANGKAT DESA",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
{
judul: "PENGUATAN TATA LAKSANA",
deskripsi: "1.3 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PENGENDALIAN GRATIFIKASI, SUAP DAN KONFLIK KEPENTINGAN",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
{
judul: "PENGUATAN TATA LAKSANA",
deskripsi: "1.4 PERJANJIAN KERJA SAMA ANTARA PELAKSANA KEGIATAN ANGGARAN DENGAN PIHAK PENYEDIA, DAN TELAH MELALUI PROSES PENGADAAN BARANG/JASA DI DESA",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
{
judul: "PENGUATAN TATA LAKSANA",
deskripsi: "1.5 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PAKTA INTEGRITAS DAN SEJENISNYA",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
{
judul: "PENGUATAN TATA LAKSANA",
deskripsi: "1.6 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PERENCANAAN, PELAKSANAAN, PENATAUSAHAAN DAN PERTANGGUNG JAWABAN APBDES BESERTA IMPLEMENTASINYA",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
]
function Tatalaksana() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={22}>
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
<Container w={{ base: "100%", md: "50%" }}>
<Stack align="center" gap={0}>
<Text fz={"3.4rem"} fw={"bold"} ta={"center"}>
Penguatan Tata Laksana
</Text>
<Text
py={10}
ta={"justify"}
>
Sebagai bagian dari Program Desa Anti Korupsi, Desa Darmasaba menerapkan penguatan tata laksana untuk memastikan transparansi, akuntabilitas, dan efisiensi dalam pemerintahan desa. Adapun beberapa Penguatan Tata Laksana :
</Text>
</Stack>
</Container>
<SimpleGrid
px={{ base: "md", md: 100 }}
cols={{
base: 1,
sm: 2,
}}>
{data.map((v, k) => {
return (
<Box
key={k}
>
<Paper p={"lg"} >
<Stack h="100%">
<Text fz={"lg"} ta={"center"} c={colors["blue-button"]}>{v.judul}</Text>
<Flex direction={{ base: "column", md: "row" }} align="center" justify="center" style={{ flex: 1 }}>
<Box mb={{ base: 10, md: 0 }}>
{v.icon}
</Box>
<Stack px={{ base: 0, md: 20 }} gap={10} style={{ flex: 1 }}>
<Text fz={"sm"} ta={"justify"}>{v.deskripsi}</Text>
<Button bg={colors["blue-button"]} radius={"lg"} w="fit-content">Download</Button>
</Stack>
</Flex>
</Stack>
</Paper>
</Box>
);
})}
</SimpleGrid >
</Stack >
);
}
export default Tatalaksana;

149
src/app/darmasaba/(tambahan)/desa-anti-korupsi/detail/page.tsx Normal file
View File

@@ -0,0 +1,149 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client';
import korupsiState from '@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi';
import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
import colors from '@/con/colors';
import React, { useEffect, useState } from 'react';
import { Box, Button, Container, Flex, Paper, SimpleGrid, Stack, Text, ActionIcon } from '@mantine/core';
import { IconFile } from '@tabler/icons-react';
import { useProxy } from 'valtio/utils';
function Lokal() {
const [selectedKategori, setSelectedKategori] = useState<string>('PENGUATAN TATA LAKSANA');
const [loading, setLoading] = useState(true);
const state = useProxy(korupsiState);
// Load data on component mount
useEffect(() => {
const loadData = async () => {
try {
setLoading(true);
await state.desaAntikorupsi.findMany.load(1, 100); // Load first 100 items
} catch (error) {
console.error('Error loading data:', error);
} finally {
setLoading(false);
}
};
loadData();
}, []);
// Get data from state
const data = state.desaAntikorupsi.findMany.data || [];
// Debug: Log the complete data structure
console.log('Complete data:', JSON.parse(JSON.stringify(data)));
// Get unique categories
const categories = [...new Set(
data
.filter(item => item.kategori?.name) // Only include items with a category name
.map(item => item.kategori.name)
)];
// Filter data based on selected category
const filteredData = selectedKategori === 'PENGUATAN TATA LAKSANA'
? data
: data.filter(item => item.kategori?.name === selectedKategori);
// Debug: Log filtered data
console.log('Filtered data:', JSON.parse(JSON.stringify(filteredData)));
return (
<Stack pos="relative" bg={colors.Bg} py="xl" gap={22}>
<Box px={{ base: "md", md: 100 }}>
<BackButton />
</Box>
<Container w={{ base: "100%", md: "80%" }}>
<Stack align="center" gap={0}>
<Text fz={"3.4rem"} fw={"bold"}>
Desa Anti Korupsi
</Text>
<Text
py={10}
ta={"justify"}
>
Desa antikorupsi mendorong pemerintahan jujur dan transparan. Keuangan desa dikelola terbuka dengan melibatkan warga mengawasi anggaran, sehingga digunakan tepat sasaran sesuai kebutuhan. Adapun beberapa jenis tata penguatan :
</Text>
</Stack>
</Container>
<Container size="lg" px={{ base: "md", md: "xl" }}>
{/* Category Filter Buttons */}
<Flex gap="md" justify="center" mb="xl" wrap="wrap">
{categories.map((kategori) => (
<Button
color={selectedKategori === kategori ? colors['blue-button'] : 'gray'}
key={kategori}
variant={selectedKategori === kategori ? 'filled' : 'outline'}
onClick={() => setSelectedKategori(kategori)}
size="sm"
>
{kategori}
</Button>
))}
</Flex>
{/* Loading State */}
{loading ? (
<Text ta="center">Memuat data...</Text>
) : (
<SimpleGrid
cols={{ base: 1, sm: 2, lg: 3 }}
spacing="xl"
verticalSpacing="xl"
>
{filteredData.map((item) => {
console.log('Item data:', item);
console.log('All item properties:', Object.keys(item).map(key => `${key}: ${item[key]}`).join(', '));
const handleDownload = async (e: React.MouseEvent) => {
e.stopPropagation();
if (!item?.file?.link) return;
try {
const fileUrl = item.file.link.startsWith('http')
? item.file.link
: `${window.location.origin}${item.file.link.startsWith('/') ? '' : '/'}${item.file.link}`;
window.open(fileUrl, '_blank');
} catch (error) {
console.error('Error opening file:', error);
}
};
return (
<Paper key={item.id} p="lg" shadow="sm" radius="md" withBorder>
<Stack h="100%" justify="space-between">
<div>
<Text fz="lg" fw={600} mb="sm" c={colors["blue-button"]}>
{item.name}
</Text>
</div>
{item?.file && (
<ActionIcon
variant="filled"
color={colors["blue-button"]}
size="lg"
onClick={handleDownload}
style={{ marginTop: 10 }}
title="Unduh File"
>
<IconFile size={20} />
</ActionIcon>
)}
</Stack>
</Paper>
);
})}
</SimpleGrid>
)}
</Container>
</Stack>
)
}
export default Lokal;

2
src/app/darmasaba/(tambahan)/desa-anti-korupsi/page.tsx
View File

@@ -69,7 +69,7 @@ function Page() {
<Box>
{v.icon}
</Box>
<Button fz={"h4"} color={colors["blue-button"]} onClick={() => router.push(v.link)}>Detail</Button>
<Button fz={"h4"} color={colors["blue-button"]} onClick={() => router.push("/darmasaba/desa-anti-korupsi/detail")}>Detail</Button>
</Stack>
</Box>
</Paper>

28
src/app/darmasaba/_com/Footer.tsx
View File

@@ -125,8 +125,8 @@ function Footer() {
>
<Box p={mobile ? 30 : 30} style={{color: "white"}}>
<Stack justify='space-between'>
<Text fz={"md"} fw={"bold"}>Tentang Darmasaba</Text>
<Text fz={"xs"} >Desa Darmasaba adalah desa
<Text fz={"md"} fw={"bold"} c={"white"}>Tentang Darmasaba</Text>
<Text fz={"xs"} c={"white"}>Desa Darmasaba adalah desa
budaya yang kaya akan tradisi dan
nilai-nilai luhur masyarakat Bali.</Text>
<Box>
@@ -149,42 +149,42 @@ function Footer() {
</Box>
<Box p={mobile ? 30 : 30}>
<Stack justify='space-between' gap={"xs"}>
<Text fz={"md"} fw={"bold"}>Layanan</Text>
<Text fz={"md"} fw={"bold"} c={"white"}>Layanan</Text>
<Anchor c={"white"} variant='transparent'>
<Text fz={"xs"} >Administrasi Kependudukan</Text>
<Text fz={"xs"} c={"white"}>Administrasi Kependudukan</Text>
</Anchor>
<Anchor c={"white"} variant='transparent'>
<Text fz={"xs"} >Pelayanan Sosial</Text>
<Text fz={"xs"} c={"white"}>Pelayanan Sosial</Text>
</Anchor>
<Anchor c={"white"} variant='transparent'>
<Text fz={"xs"} >Pengaduan Masyarakat</Text>
<Text fz={"xs"} c={"white"}>Pengaduan Masyarakat</Text>
</Anchor>
<Anchor c={"white"} variant='transparent'>
<Text fz={"xs"} >Informasi Publik</Text>
<Text fz={"xs"} c={"white"}>Informasi Publik</Text>
</Anchor>
</Stack>
</Box>
<Box p={mobile ? 30 : 30}>
<Stack justify='space-between' gap={"xs"}>
<Text fz={"md"} fw={"bold"}>Tautan Penting</Text>
<Text fz={"md"} fw={"bold"} c={"white"}>Tautan Penting</Text>
<Anchor c={"white"} variant='transparent'>
<Text fz={"xs"} >Portal Badung</Text>
<Text fz={"xs"} c={"white"}>Portal Badung</Text>
</Anchor>
<Anchor c={"white"} variant='transparent'>
<Text fz={"xs"} >E-Government</Text>
<Text fz={"xs"} c={"white"}>E-Government</Text>
</Anchor>
<Anchor c={"white"} variant='transparent'>
<Text fz={"xs"} >Transparansi</Text>
<Text fz={"xs"} c={"white"}>Transparansi</Text>
</Anchor>
<Anchor c={"white"} variant='transparent'>
<Text fz={"xs"} >Unduhan</Text>
<Text fz={"xs"} c={"white"}>Unduhan</Text>
</Anchor>
</Stack>
</Box>
<Box p={mobile ? 30 : 30}>
<Stack justify='space-between'>
<Text fz={"md"} fw={"bold"}>Newsletter</Text>
<Text fz={"xs"} >Dapatkan informasi terbaru
<Text fz={"md"} fw={"bold"} c={"white"}>Newsletter</Text>
<Text fz={"xs"} c={"white"}>Dapatkan informasi terbaru
tentang kegiatan dan program
desa</Text>
<TextInput

123
src/app/darmasaba/_com/main-page/desaantikorupsi/index.tsx
View File

@@ -1,54 +1,44 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from "@/con/colors";
import { Box, Button, Center, Container, Flex, Paper, SimpleGrid, Stack, Text, useMantineTheme } from "@mantine/core";
import { useMediaQuery } from "@mantine/hooks";
import { IconClipboardText } from "@tabler/icons-react";
import Link from "next/link";
import korupsiState from "@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi";
import { useProxy } from "valtio/utils";
import { useEffect, useState } from "react";
function DesaAntiKorupsi() {
const data = [
{
judul: "PENGUATAN TATA LAKSANA",
deskripsi: "1.1 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PERENCANAAN, PELAKSANAAN, PENATAUSAHAAN DAN PERTANGGUNG JAWABAN APBDES BESERTA IMPLEMENTASINYA",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
{
judul: "PENGUATAN TATA LAKSANA",
deskripsi: "1.2 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP MENGENAI MEKANISME EVALUASI KINERJA PERANGKAT DESA",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
{
judul: "PENGUATAN TATA LAKSANA",
deskripsi: "1.3 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PENGENDALIAN GRATIFIKASI, SUAP DAN KONFLIK KEPENTINGAN",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
{
judul: "PENGUATAN TATA LAKSANA",
deskripsi: "1.4 PERJANJIAN KERJA SAMA ANTARA PELAKSANA KEGIATAN ANGGARAN DENGAN PIHAK PENYEDIA, DAN TELAH MELALUI PROSES PENGADAAN BARANG/JASA DI DESA",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
{
judul: "PENGUATAN TATA LAKSANA",
deskripsi: "1.5 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PAKTA INTEGRITAS DAN SEJENISNYA",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
{
judul: "PENGUATAN TATA LAKSANA",
deskripsi: "1.6 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PERENCANAAN, PELAKSANAAN, PENATAUSAHAAN DAN PERTANGGUNG JAWABAN APBDES BESERTA IMPLEMENTASINYA",
icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
},
]
const state = useProxy(korupsiState);
const [loading, setLoading] = useState(false);
const theme = useMantineTheme();
const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
useEffect(() => {
const loadData = async () => {
try {
setLoading(true);
await state.desaAntikorupsi.findMany.load();
} catch (error) {
console.error('Error loading data:', error);
} finally {
setLoading(false);
}
}
loadData();
}, [])
const data = (state.desaAntikorupsi.findMany.data || []).slice(0, 6);
return (
<Stack gap={"0"} bg={colors.Bg} p={"sm"} h={mobile ? 2000 : 1150}>
<Stack gap={"0"} bg={colors.Bg} p={"sm"} h={mobile ? 2000 : 1050}>
<Container w={{ base: "100%", md: "80%" }} p={"xl"} >
<Center>
<Text fz={{base: "2.4rem", md: "3.4rem"}}>Desa Anti Korupsi</Text>
<Text fz={{ base: "2.4rem", md: "3.4rem" }}>Desa Anti Korupsi</Text>
</Center>
<Text ta={"center"} fz={{base: "1.2rem", md: "1.4rem"}}>Desa antikorupsi mendorong pemerintahan jujur dan transparan. Keuangan desa dikelola terbuka dengan melibatkan warga mengawasi anggaran, sehingga digunakan tepat sasaran sesuai kebutuhan.</Text>
<Text ta={"center"} fz={{ base: "1.2rem", md: "1.4rem" }}>Desa antikorupsi mendorong pemerintahan jujur dan transparan. Keuangan desa dikelola terbuka dengan melibatkan warga mengawasi anggaran, sehingga digunakan tepat sasaran sesuai kebutuhan.</Text>
<Center py={20}>
<Button radius={"lg"} fz={"h4"} bg={colors["blue-button"]} component={Link} href={"/darmasaba/desaantikorupsi"}>Selengkapnya</Button>
<Button radius={"lg"} fz={"h4"} bg={colors["blue-button"]} component={Link} href={"/darmasaba/desa-anti-korupsi/detail"}>Selengkapnya</Button>
</Center>
</Container>
<SimpleGrid
@@ -57,29 +47,44 @@ function DesaAntiKorupsi() {
sm: 2,
}}>
{data.map((v, k) => {
return (
<Box
key={k}
>
<Paper p={"lg"} >
<Flex gap={"lg"} justify={"center"} align={"center"}>
<Box >
<Text fz={{base: "1.2rem", md: "lg"}} ta={"center"} c={colors["blue-button"]}>{v.judul}</Text>
<Flex justify={"center"} align={"center"}>
<Box>
{v.icon}
</Box>
<Box px={20}>
<Text fz={"sm"} ta={{base: "left", md: "justify"}}>{v.deskripsi}</Text>
</Box>
</Flex>
</Box>
</Flex>
</Paper>
</Box>
)
})}
{loading ? (
<Center>
<Text fz={"2.4rem"}>Memuat Data...</Text>
</Center>
) : (
data.map((v, k) => {
return (
<Box
key={k}
>
<Paper
p={"lg"}
withBorder
shadow="sm"
h={{ base: 250, md: 210 }}
>
<Flex gap={"lg"} align={"center"}>
<Box>
<Flex justify={"center"} align={"center"}>
<Box>
<IconClipboardText color={colors["blue-button"]} size={50} />
</Box>
<Box px={20} >
<Stack gap={"xs"}>
<Text fz={{ base: "1.2rem", md: "lg" }} ta={"center"} c={colors["blue-button"]} fw={500}>
{v.kategori?.name || v.name || 'Kategori'}
</Text>
<Text dangerouslySetInnerHTML={{ __html: v.name || 'Name' }} fz={{ base: "1rem", md: "lg" }} ta={"center"} c={colors["blue-button"]} fw={500} />
</Stack>
</Box>
</Flex>
</Box>
</Flex>
</Paper>
</Box>
)
})
)}
</SimpleGrid>
</Stack>
);