wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 5 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

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