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

UI Dashboard Darmasaba

Browse Source
This commit is contained in:
nico
2025-03-12 13:53:46 +08:00
parent 61e855bd0f
commit 3324b930ef
20 changed files with 779 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

2
package.json
View File

@@ -18,6 +18,7 @@
"@elysiajs/stream": "^1.1.0",
"@elysiajs/swagger": "^1.2.0",
"@mantine/carousel": "^7.16.2",
"@mantine/charts": "^7.17.1",
"@mantine/core": "^7.16.2",
"@mantine/dropzone": "^7.17.0",
"@mantine/hooks": "^7.16.2",
@@ -45,6 +46,7 @@
"react-dom": "^19.0.0",
"react-simple-toasts": "^6.1.0",
"readdirp": "^4.1.1",
"recharts": "2",
"swr": "^2.3.2",
"valtio": "^2.1.3"
},

1
prisma/schema.prisma
View File

@@ -16,3 +16,4 @@ model Potensi {
id String @id @default(cuid())
name String @unique
}

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

@@ -1,15 +1,206 @@
import colors from "@/con/colors";
import { Stack, Container, Center, Text } from "@mantine/core";
'use client'
import colors from '@/con/colors';
import { ActionIcon, Anchor, Box, Center, Container, Divider, Flex, Group, Image, Paper, SimpleGrid, Stack, Text, TextInput, Title, useMantineTheme } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { IconAt, IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from '@tabler/icons-react';
function Footer() {
return <Stack bg={colors["blue-button"]} c={colors["white-trans-1"]}>
<Container w={{ base: "100%", md: "80%" }} p={"xl"} h={720} >
const theme = useMantineTheme();
const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
return (
<>
<Stack bg={colors["blue-button"]}>
<Box w={mobile ? "100%" : "100%"} p={"xl"} h={{ base: 1850, md: 1100 }} >
<Center>
<Text fz={"3.4rem"}>Footer</Text>
</Center>
</Container>
<Paper w={"100%"}>
<Box component="footer" py="xl">
<Container size="lg">
<Stack gap="xl">
<Box>
<Title fz={"md"} order={2} fw={700} mb="md">Komitmen Dalam Pelayanan</Title>
<Stack gap="sm">
<Group align="flex-start" gap="xs">
<Text fz={"sm"} fw={700}>1. Transparansi:</Text>
<Text fz={"sm"}>
Kami berkomitmen untuk mengelola dana desa secara terbuka, sehingga masyarakat dapat
mengetahui penggunaan anggaran secara jelas dan bertanggung jawab.
</Text>
</Group>
<Group align="flex-start" gap="xs">
<Text fz={"sm"} fw={700}>2. Profesionalisme:</Text>
<Text fz={"sm"}>
Setiap layanan desa akan dilakukan dengan profesional, cepat, dan tanpa diskriminasi,
demi memastikan kepuasan masyarakat.
</Text>
</Group>
<Group align="flex-start" gap="xs">
<Text fz={"sm"} fw={700}>3. Partisipatif:</Text>
<Text fz={"sm"}>
Kami percaya bahwa partisipasi aktif masyarakat adalah kunci keberhasilan pembangunan desa.
Oleh karena itu, kami akan terus melibatkan warga dalam setiap proses pengambilan keputusan.
</Text>
</Group>
<Group align="flex-start" gap="xs">
<Text fz={"sm"} fw={700}>4. Inovasi:</Text>
<Text fz={"sm"}>
Kami berkomitmen untuk terus berinovasi dalam memberikan solusi bagi permasalahan desa,
termasuk melalui pemanfaatan teknologi untuk mempermudah akses layanan.
</Text>
</Group>
<Group align="flex-start" gap="xs">
<Text fz={"sm"} fw={700}>5. Berkeadilan:</Text>
<Text fz={"sm"}>
Setiap kebijakan dan program desa akan dirancang untuk memberikan manfaat yang merata
bagi seluruh lapisan masyarakat, tanpa memandang status sosial atau ekonomi.
</Text>
</Group>
<Group align="flex-start" gap="xs">
<Text fz={"sm"} fw={700}>6. Pemberdayaan:</Text>
<Text fz={"sm"}>
Kami berkomitmen untuk memberdayakan masyarakat melalui pelatihan, pendampingan,
dan dukungan terhadap usaha-usaha lokal agar desa semakin mandiri.
</Text>
</Group>
<Group align="flex-start" gap="xs">
<Text fz={"sm"} fw={700}>7. Ramah Lingkungan:</Text>
<Text fz={"sm"}>
Seluruh kegiatan pembangunan dan pelayanan desa akan memperhatikan keberlanjutan lingkungan,
demi menjaga keseimbangan alam dan kenyamanan hidup warga.
</Text>
</Group>
</Stack>
</Box>
<Divider />
<Box>
<Title fz={"md"} order={2} fw={700} mb="md">Tujuan Akhir</Title>
<Text fz={"sm"} mb="sm">
Dengan visi, misi dan komitmen ini, kami bertekad untuk menjadikan desa sebagai tempat tinggal
yang nyaman, aman dan sejahtera bagi seluruh warganya.
</Text>
<Text fz={"sm"} mb="sm">
Kami percaya bahwa kemajuan desa dimulai dari kerjasama antara pemerintah desa dan masyarakat,
serta didukung oleh tata kelola yang baik dan berorientasi pada kepentingan bersama. Jika ada
masukan untuk lembaga desa, silahkan hubungi pada nomor pengaduan di bawah, terima kasih.
</Text>
</Box>
<Group justify='apart' align="center">
<Text ta={"center"} fz={"sm"} fw={700} size="lg" style={{ fontStyle: 'italic' }}>{"Desa Kuat, Masyarakat Sejahtera!"}</Text>
<Box
style={{
width: 80,
height: 80,
position: 'relative'
}}
>
<Image src="/api/img/chatbot-removebg-preview.png" alt="Logo Desa" width={80} height={80} />
</Box>
</Group>
</Stack>
</Container>
</Box>
</Paper>
</Center>
<Box py={20}>
<SimpleGrid
p={20}
cols={{
base: 2,
sm: 4,
}}
style={{
color: "white"
}}
>
<Box p={mobile ? 30 : 30}>
<Stack justify='space-between'>
<Text fz={"md"} fw={"bold"}>Tentang Darmasaba</Text>
<Text fz={"xs"} >Desa Darmasaba adalah desa
budaya yang kaya akan tradisi dan
nilai-nilai luhur masyarakat Bali.</Text>
<Box>
<Flex gap={"md"}>
<ActionIcon variant='transparent'>
<IconBrandFacebook color='white' size={"30"} />
</ActionIcon>
<ActionIcon variant='transparent'>
<IconBrandInstagram color='white' size={"30"} />
</ActionIcon>
<ActionIcon variant='transparent'>
<IconBrandTwitter color='white' size={"30"} />
</ActionIcon>
<ActionIcon variant='transparent'>
<IconBrandWhatsapp color='white' size={"30"} />
</ActionIcon>
</Flex>
</Box>
</Stack>
</Box>
<Box p={mobile ? 30 : 30}>
<Stack justify='space-between' gap={"xs"}>
<Text fz={"md"} fw={"bold"}>Layanan</Text>
<Anchor c={"white"} variant='transparent'>
<Text fz={"xs"} >Administrasi Kependudukan</Text>
</Anchor>
<Anchor c={"white"} variant='transparent'>
<Text fz={"xs"} >Pelayanan Sosial</Text>
</Anchor>
<Anchor c={"white"} variant='transparent'>
<Text fz={"xs"} >Pengaduan Masyarakat</Text>
</Anchor>
<Anchor c={"white"} variant='transparent'>
<Text fz={"xs"} >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>
<Anchor c={"white"} variant='transparent'>
<Text fz={"xs"} >Portal Badung</Text>
</Anchor>
<Anchor c={"white"} variant='transparent'>
<Text fz={"xs"} >E-Government</Text>
</Anchor>
<Anchor c={"white"} variant='transparent'>
<Text fz={"xs"} >Transparansi</Text>
</Anchor>
<Anchor c={"white"} variant='transparent'>
<Text fz={"xs"} >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
tentang kegiatan dan program
desa</Text>
<TextInput
placeholder='Alamat email anda'
rightSection={<IconAt color={colors["blue-button"]} />}
/>
</Stack>
</Box>
</SimpleGrid>
</Box>
<Divider py={15} />
<Text ta={"center"} c={"white"} p={20}>
© 2024 Desa Darmasaba. Hak Cipta Dilindungi.
</Text>
</Box>
</Stack>
</>
);
}
export default Footer;

104
src/app/darmasaba/_com/main-page/apbdes/index.tsx Normal file
View File

@@ -0,0 +1,104 @@
import colors from '@/con/colors';
import { BackgroundImage, Box, Button, Group, SimpleGrid, Stack, Text } from '@mantine/core';
const data = [
{
id: 1,
title: "Pendapatan",
image: "/api/img/pendapatan.jpeg",
value: "Rp 495M"
},
{
id: 2,
title: "Belanja",
image: "/api/img/belanja.jpeg",
value: "Rp 395M"
},
{
id: 3,
title: "Pembiayaan",
image: "/api/img/pembiayaan.jpeg",
value: "Rp 295M"
},
]
function Apbdes() {
const textHeading = {
title: "APBDes",
des: "Transparansi APBDes Darmasaba adalah langkah nyata menuju tata kelola pemerintahan desa yang bersih dan bertanggung jawab"
}
return (
<>
<Stack p={"sm"} gap={"4rem"} >
<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,
}}
>
{data.map((v, k) => {
return (
<BackgroundImage
key={k}
src={v.image}
h={350}
radius={16}
pos={"relative"}
>
<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.title}</Text>
</Box>
<Text
fw={"bold"}
c={"white"}
size={"3.5rem"}
style={{
textAlign: "center",
}}>{v.value}</Text>
<Group justify="center">
<Button px={46} radius={"100"} size="md" bg={colors["blue-button"]}>
Detail
</Button>
</Group>
</Stack>
</BackgroundImage>
)
})}
</SimpleGrid>
</Stack>
</>
);
}
export default Apbdes;

16
src/app/darmasaba/_com/main-page/content-5/index.tsx
View File

@@ -1,16 +0,0 @@
"use client";
import { Center, Container, Stack, Text } from "@mantine/core";
function Content5() {
return (
<Stack>
<Container w={{ base: "100%", md: "80%" }} p={"xl"} h={720}>
<Center>
<Text fz={"3.4rem"}>Berkolaborasi membangun desa</Text>
</Center>
</Container>
</Stack>
);
}
export default Content5;

18
src/app/darmasaba/_com/main-page/content-6/index.tsx
View File

@@ -1,18 +0,0 @@
"use client";
import { Stack, Container, Center, Text } from "@mantine/core";
function Content6() {
return (
<Stack>
<Container w={{ base: "100%", md: "80%" }} p={"xl"} h={720}>
<Center>
<Text fz={"3.4rem"}>Indeks Kepuasan Masyarakat</Text>
</Center>
</Container>
</Stack>
);
}
export default Content6;

13
src/app/darmasaba/_com/main-page/content-7/index.tsx
View File

@@ -1,13 +0,0 @@
import { Stack, Container, Center, Text } from "@mantine/core";
export default function Content7() {
return (
<Stack>
<Container w={{ base: "100%", md: "80%" }} p={"xl"} h={720}>
<Center>
<Text fz={"3.4rem"}>APBDES Darmasaba</Text>
</Center>
</Container>
</Stack>
);
}

0
src/app/darmasaba/_com/main-page/content-5/FlipScroll.tsx → src/app/darmasaba/_com/main-page/desaantikorupsi/FlipScroll.tsx
View File

89
src/app/darmasaba/_com/main-page/desaantikorupsi/index.tsx Normal file
View File

@@ -0,0 +1,89 @@
"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 { motion } from "motion/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={180} color={colors["blue-button"]} />,
},
{
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={180} color={colors["blue-button"]} />,
},
{
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={180} color={colors["blue-button"]} />,
},
{
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={180} color={colors["blue-button"]} />,
},
{
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={180} color={colors["blue-button"]} />,
},
{
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={180} color={colors["blue-button"]} />,
},
]
const theme = useMantineTheme();
const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
return (
<Stack gap={"0"} bg={colors.Bg} p={"sm"} h={mobile ? 2000 : 1150}>
<Container w={{ base: "100%", md: "80%" }} p={"xl"} >
<Center>
<Text fz={"3.4rem"}>Desa Anti Korupsi</Text>
</Center>
<Text ta={"center"} fz={"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>
</Container>
<SimpleGrid
pt={50}
cols={{
base: 1,
sm: 2,
}}>
{data.map((v, k) => {
return (
<motion.div
key={k}
whileTap={{ scale: 0.8 }}
>
<Paper p={"lg"} >
<Flex gap={"lg"} justify={"center"} align={"center"}>
<Box >
<Text fz={"lg"} ta={"center"} c={colors["blue-button"]}>{v.judul}</Text>
<Flex gap={"lg"} justify={"center"} align={"center"}>
{v.icon}
<Box>
<Text fz={"sm"} ta={"justify"}>{v.deskripsi}</Text>
<Box pt={10}>
<Button bg={colors["blue-button"]} radius={"lg"}>Download</Button>
</Box>
</Box>
</Flex>
</Box>
</Flex>
</Paper>
</motion.div>
)
})}
</SimpleGrid>
</Stack>
);
}
export default DesaAntiKorupsi;

173
src/app/darmasaba/_com/main-page/kepuasan/index.tsx Normal file
View File

@@ -0,0 +1,173 @@
"use client";
import { Stack, Container, Center, Text, Paper, Flex, Box, SimpleGrid } from "@mantine/core";
import { BarChart, PieChart } from '@mantine/charts';
import colors from "@/con/colors";
const dataBarChart = [
{
bulan: "Januari",
responden: "480"
},
{
bulan: "Februari",
responden: "730"
},
{
bulan: "Maret",
responden: "740"
},
{
bulan: "April",
responden: "80"
},
{
bulan: "Mei",
responden: "250"
},
{
bulan: "Juni",
responden: "900"
},
{
bulan: "Juli",
responden: "230"
},
{
bulan: "Agustus",
responden: "255"
},
{
bulan: "September",
responden: "650"
},
{
bulan: "Oktober",
responden: "730"
},
{
bulan: "November",
responden: "800"
},
{
bulan: "Desember",
responden: "1000"
},
]
const dataPieChart = [
{ name: "Laki-laki", value: 70, color: colors["blue-button"] },
{ name: "Perempuan", value: 30, color: colors.orange },
]
const dataPieChart2 = [
{ name: "Sangat Baik", value: 75, color: colors["blue-button"] },
{ name: "Buruk", value: 25, color: colors.orange },
]
const dataPieChart3 = [
{ name: "Umur 18-44", value: 65, color: colors["blue-button"] },
{ name: "Umur 44-60+", value: 35, color: colors.orange },
]
function Kepuasan() {
return (
<Stack p={"sm"}>
<Container w={{ base: "100%", md: "80%" }} p={"xl"}>
<Center>
<Text fz={"3.4rem"}>Indeks Kepuasan Masyarakat</Text>
</Center>
<Text fz={"1.4rem"} ta={"center"}>Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!</Text>
</Container>
<Box px={"xl"}>
<Paper p={"lg"} bg={colors.Bg}>
<Paper p={"lg"}>
<Flex justify={"space-between"} align={"center"}>
<Text fw={"bold"}>Pelayanan Terhadap Publik Desa Darmasaba</Text>
<Box>
<Text fz={"h1"} fw={"bold"} c={colors["blue-button"]}>95.00</Text>
<Text >Sangat Baik</Text>
<Text fz={"sm"} fw={"bold"} c={colors["blue-button"]}>Total 2500 responden</Text>
</Box>
</Flex>
<BarChart
py={"xl"}
h={300}
data={dataBarChart}
dataKey="bulan"
tickLine="y"
series={[
{
name: "responden",
color: colors["blue-button"],
},
]}
/>
</Paper>
<Box py={"xl"}>
<SimpleGrid
cols={{
base: 1,
sm: 3
}}
>
<Box>
<Paper p={"lg"}>
<Text fw={"bold"}>Jenis Kelamin</Text>
<Box py={"xl"}>
<PieChart
size={250}
withLabelsLine
labelsPosition="outside"
labelsType="percent"
withLabels
data={dataPieChart}
withTooltip tooltipDataSource="segment" mx="auto"
/>
</Box>
</Paper>
</Box>
<Box>
<Paper p={"lg"}>
<Text fw={"bold"}>Pilihan</Text>
<Box py={"xl"}>
<PieChart
size={250}
withLabelsLine
labelsPosition="outside"
labelsType="percent"
withLabels
data={dataPieChart2}
withTooltip tooltipDataSource="segment" mx="auto"
/>
</Box>
</Paper>
</Box>
<Box>
<Paper p={"lg"}>
<Text fw={"bold"}>Umur</Text>
<Box py={"xl"}>
<PieChart
size={250}
withLabelsLine
labelsPosition="outside"
labelsType="percent"
withLabels
data={dataPieChart3}
withTooltip tooltipDataSource="segment" mx="auto"
/>
</Box>
</Paper>
</Box>
</SimpleGrid>
</Box>
</Paper>
</Box>
</Stack>
);
}
export default Kepuasan;

23
src/app/darmasaba/_com/main-page/layanan/index.tsx
View File

@@ -24,32 +24,32 @@ import useSWR from "swr";
const data = [
{
id: 1,
images: "/assets/images/layanan/test.png",
images: "/api/img/test.png",
name: "Surat Keterangan Domisili Organisasi"
},
{
id: 2,
images: "/assets/images/layanan/test3.jpeg",
images: "/api/img/test-3.jpeg",
name: "Surat Keterangan Penghasilan"
},
{
id: 3,
images: "/assets/images/layanan/test2.jpeg",
images: "/api/img/domisili.jpeg",
name: "Surat Keterangan Tidak Mampu"
},
{
id: 4,
images: "/assets/images/layanan/kelahiran.jpeg",
images: "/api/img/kelahiran.jpeg",
name: "Surat Keterangan Kelahiran"
},
{
id: 5,
images: "/assets/images/layanan/test.png",
images: "/api/img/keterangan-usaha.jpeg",
name: "Surat Keterangan Usaha"
},
{
id: 6,
images: "/assets/images/layanan/test2.jpeg",
images: "/api/img/kematian.jpeg",
name: "Surat Keterangan Kematian"
},
@@ -83,13 +83,13 @@ function Layanan() {
>
{textHeading.des}
</Text>
{/* <Box p={"md"}>
<Box p={"md"}>
<Button onClick={() => {
router.push("/layanan")
}} variant="filled" bg={"dark"} radius={100}>
Lanjutkan
}} variant="filled" bg={colors["blue-button"]} radius={100}>
Detail
</Button>
</Box> */}
</Box>
</Stack>
</Container>
<Slider />
@@ -126,6 +126,7 @@ function Slider() {
<Stack justify="space-between" h={"100%"} gap={0} p={"lg"} pos={"relative"} >
<Box p={"lg"}>
<Text
fw={"bold"}
c={"white"}
size={"3.5rem"}
@@ -139,7 +140,7 @@ function Slider() {
<Group justify="center">
<Button onClick={() => {
router.push(`/layanan/${item.id}`)
}} px={46} radius={"100"} size="md">
}} px={46} radius={"100"} size="md" bg={colors["blue-button"]}>
Detail
</Button>
</Group>

3
src/app/darmasaba/_com/main-page/penghargaan/index.tsx
View File

@@ -1,4 +1,5 @@
'use client';
import colors from "@/con/colors";
import { Stack, Box, Container, Button, Text } from "@mantine/core";
import { useTransitionRouter } from 'next-view-transitions'
@@ -54,7 +55,7 @@ function Penghargaan() {
Juara Favorit Lomba Video Pendek
</Text>
</Stack>
<Button onClick={() => router.push("/penghargaan")} variant="white" radius={100}>
<Button color={colors["blue-button"]} onClick={() => router.push("/penghargaan")} variant="white" radius={100}>
Selanjutnya
</Button>
</Stack>

65
src/app/darmasaba/_com/main-page/content-4/index.tsx → src/app/darmasaba/_com/main-page/potensi/index.tsx
View File

@@ -18,17 +18,41 @@ import _ from "lodash";
import { motion } from "motion/react";
import useSWR from "swr";
type DataPotensi = {
id: string;
name: string;
};
const datamap = [
{
id: 1,
images: "/api/img/tps-3-r-pudak-mesari-olah-sampah-organik-300-kilogra-800-2023-01-12-091459-0.jpg",
name: "TPS3R Pudak Mesari",
deskripsi: "TPS 3R Pudak Mesari Darmasaba layak mendapat penghargaan demikian apresiasi dari Delterra Sosial Indonesia nie Semeton Darmasaba!, Hal tersebut dikarenakan walaupun baru berdiri namun TPS 3R kebanggaan Desa Darmasaba tersebut sudah berjalan dengan sangat baik. "
},
{
id: 2,
images: "/api/img/ack.png",
name: "Bumdes Pudak Mesari",
deskripsi: "Bumdes Pudak Mesari sangat membantu warga desa Darmasaba dalam mengelola dan membangun sebuah desa yang lebih baik lagi"
},
{
id: 3,
images: "/api/img/tamanbeji.png",
name: "Taman Beji Cengana",
deskripsi: "Tirta Klebutan di Pura Taman Beji Cengana di Desa Adat Darmasaba, Badung, selain dipercaya nunas Taksu serta pembersihan diri. Tersemat juga asal usul cerita ditemukannya Tirta Klebutan yang tepat berada di pinggir Tukad Cengana tersebut."
},
{
id: 4,
images: "/api/img/waterpark.png",
name: "Gumuh Sari Water Park",
deskripsi: "Gumuh Sari Rekreasi atau waterpark, tempat wisata yang asyik dan seru untuk kamu sekeluarga! Tempat liburan di Bali memang seakan nggak ada habisnya. Selalu ada aja destinasi wisata seru yang bisa jadi wishlist. Ada banyak banget tempat wisata yang kamu kunjungi di Bali, mulai dari wisata alam, wisata modern, sampai wisata air."
},
]
const textHeading = {
title: "Potensi",
des: "segenap sumber daya alam dan sumber daya manusia yang dimiliki desa sebagai modal dasar yang perlu dikelola dan dikembangkan bagi kelangsungan dan perkembangan desa",
des: "Tidak hanya untuk warga desa, fitur ini juga dapat digunakan oleh pemerintah desa untuk merencanakan program pengembangan berbasis potensi lokal",
};
function Content4() {
function Potensi() {
const { data, isLoading } = useSWR("/", (url) =>
ApiFetch.api.potensi.get().then(({ data }) => data?.data)
);
@@ -57,7 +81,7 @@ function Content4() {
whileTap={{ scale: 0.8 }}
>
<BackgroundImage
src={images.tps}
src={datamap[k].images}
h={320}
key={k}
radius={16}
@@ -84,15 +108,16 @@ function Content4() {
}}
>
<Text fw={"bold"} c={"gray.1"} size={"2.4rem"}>
{v.name}
{datamap[k].name}
</Text>
<Text
lineClamp={2}
style={{
textAlign: "center",
textAlign: "justify",
}}
c={"blue"}
c={colors["white-1"]}
>
Tambahkan Text Indikasi Keberhasilan
{datamap[k].deskripsi}
</Text>
</Stack>
</BackgroundImage>
@@ -101,20 +126,8 @@ function Content4() {
</SimpleGrid>
<Stack align="center">
<Group>
<Stack gap={0}>
<Title>Text Lanjutan Mengarahkan</Title>
<Text
style={{
textAlign: "center",
}}
>
deskripsi singkat sebelum tombol dibawah setelah ini
</Text>
</Stack>
</Group>
<Group>
<Button variant="outline" radius={100} size="md">
Selanjutnya
<Button color={colors["blue-button"]} variant="outline" radius={100} size="md">
Selengkapnya
</Button>
</Group>
</Stack>
@@ -123,4 +136,4 @@ function Content4() {
);
}
export default Content4;
export default Potensi;

93
src/app/darmasaba/_com/main-page/prestasi/index.tsx Normal file
View File

@@ -0,0 +1,93 @@
import colors from "@/con/colors";
import { BackgroundImage, Box, Button, Center, Container, Group, SimpleGrid, Stack, Text } from "@mantine/core";
const data = [
{
id: 1,
title: "Tata Kelola Pemerintahan",
image: "/api/img/lombadesa.jpg",
deskripsi: "Juara 1 Lomba Desa Tingkat Kabupaten/Kota Tahun [XXXX]"
},
{
id: 2,
title: "Tata Kelola Pemerintahan",
image: "/api/img/lombadesa.jpg",
deskripsi: "Juara 1 Lomba Desa Tingkat Kabupaten/Kota Tahun [XXXX]"
},
{
id: 3,
title: "Tata Kelola Pemerintahan",
image: "/api/img/lombadesa.jpg",
deskripsi: "Juara 1 Lomba Desa Tingkat Kabupaten/Kota Tahun [XXXX]"
},
]
function Prestasi() {
return (
<>
<Stack p={"sm"}>
<Container w={{ base: "100%", md: "80%" }} p={"xl"}>
<Center>
<Text fz={"3.4rem"}>Prestasi Desa</Text>
</Center>
<Text fz={"1.4rem"} ta={"center"}>Kami bangga dengan apa yang telah dicapai desa kita hingga saat ini. Semoga prestasi ini menjadi inspirasi untuk terus berkarya dan berinovasi demi kemajuan bersama.</Text>
</Container>
<Box py={50}>
<SimpleGrid
cols={{
base: 1,
sm: 3
}}
>
{data.map((v, k) => {
return (
<BackgroundImage
key={k}
src={v.image}
h={720}
radius={16}
pos={"relative"}
>
<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"}
ta={"center"}
>
{v.title}
</Text>
</Box>
<Text
fw={"bold"}
c={"white"}
size={"3.5rem"}
ta={"center"}
>
{v.deskripsi}
</Text>
<Group justify="center">
<Button px={46} radius={"100"} size="md" bg={colors["blue-button"]}>
Lihat Detail
</Button>
</Group>
</Stack>
</BackgroundImage>
)
})}
</SimpleGrid>
</Box>
</Stack>
</>
)
}
export default Prestasi;

40
src/app/darmasaba/_com/main-page/sdgs/index.tsx Normal file
View File

@@ -0,0 +1,40 @@
'use client'
import colors from "@/con/colors";
import { Box, Center, Container, Image, Paper, SimpleGrid, Stack, Text, useMantineTheme } from "@mantine/core";
import { useMediaQuery } from "@mantine/hooks";
export default function SDGS() {
const theme = useMantineTheme();
const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
return (
<Stack p={"sm"}>
<Container w={{ base: "100%", md: "80%" }} p={"xl"}>
<Center>
<Text fz={"3.4rem"}>SDGs Desa</Text>
</Center>
<Text fz={"1.4rem"} ta={"center"}>SDGs Desa adalah upaya menerapkan 17 Tujuan Pembangunan Berkelanjutan di tingkat desa.
Dengan fokus pada pengentasan kemiskinan, pendidikan, kesehatan, kesetaraan gender, dan pelestarian lingkungan, kami berkomitmen untuk menciptakan desa yang lebih baik bagi semua</Text>
<Box py={50}>
<Paper p={"lg"} bg={colors.Bg}>
<SimpleGrid
cols={{
base: 1,
sm: 3,
}}>
<Center>
<Image src={"/api/img/sgdesa-1.png"} alt="" w={mobile ? 250 : 200} />
</Center>
<Center>
<Image src={"/api/img/sgdesa-2.png"} alt="" w={mobile ? 250 : 220} />
</Center>
<Center>
<Image src={"/api/img/sgdesa-3.png"} alt="" w={mobile ? 250 : 190} />
</Center>
</SimpleGrid>
</Paper>
</Box>
</Container>
</Stack>
);
}

5
src/app/darmasaba/layout.tsx
View File

@@ -1,7 +1,10 @@
import colors from "@/con/colors";
import { Box, Space, Stack } from "@mantine/core";
import Footer from "@/app/darmasaba/_com/Footer";
import { Navbar } from "@/app/darmasaba/_com/Navbar";
import Footer from "./_com/Footer";
export default function Layout({ children }: { children: React.ReactNode }) {
return (

26
src/app/darmasaba/page.tsx
View File

@@ -1,24 +1,30 @@
import DesaAntiKorupsi from "@/app/darmasaba/_com/main-page/desaantikorupsi";
import Kepuasan from "@/app/darmasaba/_com/main-page/kepuasan";
import LandingPage from "@/app/darmasaba/_com/main-page/landing-page";
import Layanan from "@/app/darmasaba/_com/main-page/layanan";
import Penghargaan from "@/app/darmasaba/_com/main-page/penghargaan";
import Content3 from "@/app/darmasaba/_com/main-page/layanan";
import Content4 from "@/app/darmasaba/_com/main-page/content-4";
import Content5 from "@/app/darmasaba/_com/main-page/content-5";
import Content6 from "@/app/darmasaba/_com/main-page/content-6";
import Potensi from "@/app/darmasaba/_com/main-page/potensi";
import colors from "@/con/colors";
import SDGS from "./_com/main-page/sdgs";
// import ApiFetch from "@/lib/api-fetch";
import { Stack } from "@mantine/core";
import Content7 from "@/app/darmasaba/_com/main-page/content-7";
import Apbdes from "./_com/main-page/apbdes";
import Prestasi from "./_com/main-page/prestasi";
export default function Page() {
return (
<Stack bg={colors.grey[1]} gap={"4rem"}>
<LandingPage />
<Penghargaan />
<Content3 />
<Content4 />
<Content5 />
<Content6 />
<Content7 />
<Layanan />
<Potensi />
<DesaAntiKorupsi />
<Kepuasan />
<SDGS />
<Apbdes />
<Prestasi/>
</Stack>
);
}

1
src/app/layout.tsx
View File

@@ -7,6 +7,7 @@ import "animate.css";
import 'react-simple-toasts/dist/style.css';
import 'react-simple-toasts/dist/theme/dark.css';
import "./globals.css";
import '@mantine/charts/styles.css';

1
src/con/colors.ts
View File

@@ -1,4 +1,5 @@
const colors = {
"orange": "#FCAE00",
"blue-button": "#0A4E78",
"white-1": "#FBFBFC",
"white-trans-1": "rgba(255, 255, 255, 0.5)",