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

Fix Menu Lingkungan Darmasaba User

Browse Source
This commit is contained in:
nico
2025-08-26 17:49:33 +08:00
parent b21e1f0c2e
commit 3a726a3334
36 changed files with 2509 additions and 1977 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
src/app/darmasaba/_com/main-page/apbdes/index.tsx
View File

@@ -1,121 +1,136 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import apbdes from '@/app/admin/(dashboard)/_state/landing-page/apbdes';
import colors from '@/con/colors';
import { ActionIcon, BackgroundImage, Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text } from '@mantine/core';
import { IconDownload } from '@tabler/icons-react';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
import apbdes from '@/app/admin/(dashboard)/_state/landing-page/apbdes'
import colors from '@/con/colors'
import { ActionIcon, BackgroundImage, Box, Button, Center, Flex, Group, Loader, SimpleGrid, Stack, Text } from '@mantine/core'
import { IconDownload } from '@tabler/icons-react'
import Link from 'next/link'
import { useEffect, useState } from 'react'
import { useProxy } from 'valtio/utils'
function Apbdes() {
const state = useProxy(apbdes);
const [loading, setLoading] = useState(false);
const state = useProxy(apbdes)
const [loading, setLoading] = useState(false)
const textHeading = {
title: "APBDes",
des: "Transparansi APBDes Darmasaba adalah langkah nyata menuju tata kelola pemerintahan desa yang bersih dan bertanggung jawab"
title: 'APBDes',
des: 'Transparansi APBDes Darmasaba adalah langkah nyata menuju tata kelola desa yang bersih, terbuka, dan bertanggung jawab.'
}
useEffect(() => {
const loadData = async () => {
try {
setLoading(true);
await state.findMany.load();
setLoading(true)
await state.findMany.load()
} catch (error) {
console.error('Error loading data:', error);
console.error('Error loading data:', error)
} finally {
setLoading(false);
setLoading(false)
}
}
loadData();
loadData()
}, [])
const data = (state.findMany.data || []).slice(0, 3);
const data = (state.findMany.data || []).slice(0, 3)
return (
<>
<Stack p={"sm"} gap={"4rem"} bg={colors.Bg}>
<Box
w={{
base: '100%',
sm: '60%',
}}
>
<Stack gap={0}>
<Text fz={"4.4rem"} fw={"bold"}>
{textHeading.title}
</Text>
<Text fz={"1.4rem"}>
{textHeading.des}
</Text>
</Stack>
</Box>
<SimpleGrid
cols={{
base: 1,
sm: 3,
}}
>
{loading ? (
<Center>
<Text fz={"2.4rem"}>Memuat Data...</Text>
</Center>
) : (
data.map((v, k) => {
return (
<BackgroundImage
key={k}
src={v.image?.link || ''}
h={350}
radius={16}
pos={"relative"}
<Stack p="lg" gap="4rem" bg={colors.Bg}>
<Box w={{ base: '100%', sm: '70%' }}>
<Stack gap="sm">
<Text fz={{ base: '2.4rem', sm: '4rem' }} fw="bold" lh={1.2}>
{textHeading.title}
</Text>
<Text fz={{ base: '1rem', sm: '1.3rem' }} c="dimmed">
{textHeading.des}
</Text>
</Stack>
</Box>
<SimpleGrid cols={{ base: 1, sm: 3 }} spacing="lg">
{loading ? (
<Center mih={200}>
<Loader size="lg" color="blue" />
</Center>
) : data.length === 0 ? (
<Center mih={200}>
<Stack align="center" gap="xs">
<Text fz="lg" c="dimmed">
Belum ada data APBDes yang tersedia
</Text>
<Text fz="sm" c="dimmed">
Data akan ditampilkan di sini setelah diunggah
</Text>
</Stack>
</Center>
) : (
data.map((v, k) => (
<BackgroundImage
key={k}
src={v.image?.link || ''}
h={360}
radius="xl"
pos="relative"
style={{ overflow: 'hidden' }}
>
<Box
pos="absolute"
inset={0}
bg="rgba(0,0,0,0.55)"
style={{ backdropFilter: 'blur(4px)' }}
/>
<Stack justify="space-between" h="100%" p="xl" pos="relative">
<Text
c="white"
fw={600}
fz="lg"
ta="center"
lineClamp={2}
>
<Box
style={{
borderRadius: 16,
zIndex: 0
}}
pos={"absolute"}
w={"100%"}
h={"100%"}
bg={colors.trans.dark[2]}
/>
<Stack justify='space-between' h={"100%"} gap={0} p={"lg"} pos={"relative"}>
<Box p={"lg"}>
<Text
c={"white"}
size={"1.5rem"}
style={{
textAlign: "center",
}}>{v.name}</Text>
</Box>
<Text
fw={"bold"}
c={"white"}
size={"3.5rem"}
style={{
textAlign: "center",
}}>{v.jumlah}</Text>
<Group justify="center">
<ActionIcon px={70} py={20} radius={"xl"} size="md" bg={colors["blue-button"]} component={Link} href={v.file?.link || ''}>
<Flex gap={"md"}>
<IconDownload size={20} />
<Text fz={"sm"} c={"white"}>Download</Text>
</Flex>
</ActionIcon>
</Group>
</Stack>
</BackgroundImage>
)
})
)}
</SimpleGrid>
<Group pb={80} justify='center'>
<Button component={Link} href="/darmasaba/apbdes" radius={"lg"} bg={colors["blue-button"]} fz={"h4"}>Lihat Semua</Button>
</Group>
</Stack>
</>
);
{v.name}
</Text>
<Text
fw="bold"
c="white"
fz="3rem"
ta="center"
style={{ textShadow: '0 2px 8px rgba(0,0,0,0.6)' }}
>
{v.jumlah}
</Text>
<Group justify="center">
<ActionIcon
component={Link}
href={v.file?.link || ''}
radius="xl"
size="lg"
variant="gradient"
gradient={{ from: '#1C6EA4', to: '#1C6EA4' }}
>
<Flex align="center" gap="xs" px="md" py={6}>
<IconDownload size={18} color="white" />
</Flex>
</ActionIcon>
</Group>
</Stack>
</BackgroundImage>
))
)}
</SimpleGrid>
<Group pb={80} justify="center">
<Button
component={Link}
href="/darmasaba/apbdes"
radius="xl"
size="lg"
variant="gradient"
gradient={{ from: "#26667F", to: "#124170" }}
>
Lihat Semua Data
</Button>
</Group>
</Stack>
)
}
export default Apbdes;
export default Apbdes