From 50a46e2ca78f6991a0bb9027872613b229a0e217 Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Thu, 20 Mar 2025 23:36:26 +0800
Subject: [PATCH] UI All Menu PPID

---
 .../darmasaba/(pages)/ppid/daftar/page.tsx    |  87 +++++++++
 .../(pages)/ppid/dasarhukum/page.tsx          | 104 +++++++++++
 src/app/darmasaba/(pages)/ppid/ikm/page.tsx   | 167 ++++++++++++++++++
 .../darmasaba/(pages)/ppid/informasi/page.tsx |  85 +++++++++
 .../darmasaba/(pages)/ppid/keberatan/page.tsx | 117 ++++++++++++
 .../darmasaba/(pages)/ppid/profile/page.tsx   | 112 ++++++++++++
 .../darmasaba/(pages)/ppid/struktur/page.tsx  |  24 +++
 .../darmasaba/(pages)/ppid/visimisi/page.tsx  |  56 ++++++
 .../(tambahan)/permohonan/berhasil/page.tsx   |  38 ++++
 .../(tambahan)/permohonan/gagal/page.tsx      |  11 ++
 src/con/navbar-list-menu.ts                   |   8 +-
 11 files changed, 805 insertions(+), 4 deletions(-)
 create mode 100644 src/app/darmasaba/(pages)/ppid/daftar/page.tsx
 create mode 100644 src/app/darmasaba/(pages)/ppid/dasarhukum/page.tsx
 create mode 100644 src/app/darmasaba/(pages)/ppid/ikm/page.tsx
 create mode 100644 src/app/darmasaba/(pages)/ppid/informasi/page.tsx
 create mode 100644 src/app/darmasaba/(pages)/ppid/keberatan/page.tsx
 create mode 100644 src/app/darmasaba/(pages)/ppid/profile/page.tsx
 create mode 100644 src/app/darmasaba/(pages)/ppid/struktur/page.tsx
 create mode 100644 src/app/darmasaba/(pages)/ppid/visimisi/page.tsx
 create mode 100644 src/app/darmasaba/(tambahan)/permohonan/berhasil/page.tsx
 create mode 100644 src/app/darmasaba/(tambahan)/permohonan/gagal/page.tsx

diff --git a/src/app/darmasaba/(pages)/ppid/daftar/page.tsx b/src/app/darmasaba/(pages)/ppid/daftar/page.tsx
new file mode 100644
index 00000000..82768a10
--- /dev/null
+++ b/src/app/darmasaba/(pages)/ppid/daftar/page.tsx
@@ -0,0 +1,87 @@
+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 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>
+  ))
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Center>
+        <Image src={"/api/img/darmasaba-icon.png"} w={{ base: 70, md: 100 }} alt='' />
+      </Center>
+      <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+        Daftar Informasi Publik Desa Darmasaba
+      </Text>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lmd'}>
+          <Text fz={{ base: 'h3', md: 'h2' }} fw={"bold"}>Tentang Informasi Publik</Text>
+          <Text fz={{ base: 'md', md: 'h3' }}>Daftar Informasi Publik Desa Darmasaba berupa kumpulan data yang dapat diakses oleh masyarakat sesuai dengan peraturan yang berlaku.</Text>
+          <TextInput
+            placeholder='Cari Informasi...'
+            leftSection={<IconSearch size={20} />}
+          />
+          <Table withRowBorders withColumnBorders withTableBorder>
+            <TableThead bg={colors['blue-button']}>
+              <TableTr c={colors['white-1']}>
+                <TableTh ta={'center'}>No</TableTh>
+                <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>
+          </Table>
+        </Stack>
+        <Text pt={20} fz={'h4'} fw={"bold"}>Kontak PPID</Text>
+        <Text fz={'sm'}>Email: ppid@desadarmasaba.id  |  WhatsApp: 081-xxx-xxx-xxx</Text>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;
diff --git a/src/app/darmasaba/(pages)/ppid/dasarhukum/page.tsx b/src/app/darmasaba/(pages)/ppid/dasarhukum/page.tsx
new file mode 100644
index 00000000..74a6b2a6
--- /dev/null
+++ b/src/app/darmasaba/(pages)/ppid/dasarhukum/page.tsx
@@ -0,0 +1,104 @@
+import colors from '@/con/colors';
+import { Box, List, ListItem, Paper, Stack, Text } from '@mantine/core';
+import BackButton from '../../desa/layanan/_com/BackButto';
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+        Dasar Hukum
+      </Text>
+      <Box px={{ base: "md", md: 100 }}>
+        <Paper p={"xl"} bg={colors['white-trans-1']}>
+          <Box pb={30}>
+            <Text ta={"center"} fw={"bold"} fz={{ base: 'h4', md: 'h3' }}>DASAR HUKUM PEMBENTUKAN PPID</Text>
+            <Text ta={"center"} fw={"bold"} fz={{ base: 'h4', md: 'h3' }}>DESA DARMASABA</Text>
+          </Box>
+          <List>
+            <ListItem fz={{ base: 'md', md: 'h4' }}>
+              <Text ta={"justify"} fz={{ base: 'md', md: 'h4' }}>
+              <Text fw={"bold"} span>
+                UU Nomor 14 Tahun 2008
+              </Text>
+                {" "}tentang Keterbukaan Informasi Publik
+              </Text>
+            </ListItem>
+            <ListItem fz={{ base: 'md', md: 'h4' }}>
+              <Text ta={"justify"} fz={{ base: 'md', md: 'h4' }}>
+              <Text fw={"bold"} span>
+                PP Nomor 61 Tahun 2010
+              </Text>
+              {" "}tentang Pelaksanaan UU 14 Tahun 2008 tentang Keterbukaan Informasi Publik
+              </Text>
+            </ListItem>
+            <ListItem fz={{ base: 'md', md: 'h4' }}>
+              <Text ta={"justify"} fz={{ base: 'md', md: 'h4' }}>
+              <Text fw={"bold"} span>
+                Permendagri Nomor 3 Tahun 2017
+              </Text>
+              {" "}tentang Pedoman Pengelolaan Pelayanan Informasi dan Dokumentasi di Lingkungan Kemendagri
+                dan Pemerintah Daerah
+              </Text>
+            </ListItem>
+            <ListItem fz={{ base: 'md', md: 'h4' }}>
+              <Text ta={"justify"} fz={{ base: 'md', md: 'h4' }}>
+              <Text fw={"bold"} span>
+                Peraturan Komisi Informasi Nomor 1 Tahun 2010
+              </Text>
+              {" "} tentang Standar Layanan Informasi Publik
+              </Text>
+            </ListItem>
+            <ListItem fz={{ base: 'md', md: 'h4' }}>
+              <Text ta={"justify"} fz={{ base: 'md', md: 'h4' }}>
+              <Text fw={"bold"} span>
+                Peraturan Komisi Informasi Nomor 1 Tahun 2010
+              </Text>
+              {" "} tentang Standar Layanan Informasi Publik
+              </Text>
+            </ListItem>
+            <ListItem fz={{ base: 'md', md: 'h4' }}>
+              <Text ta={"justify"} fz={{ base: 'md', md: 'h4' }}>
+              <Text fw={"bold"} span>
+                Peraturan Bupati Badung No. 42 Tahun 2017
+              </Text>
+              {" "}Tentang Pedoman Pengelolaan Pelayanan Informasi Publik dan Dokumentasi
+                di Lingkungan Pemerintah Kabupaten Badung
+              </Text>
+            </ListItem>
+            <ListItem fz={{ base: 'md', md: 'h4' }}>
+              <Text ta={"justify"} fz={{ base: 'md', md: 'h4' }}>
+              <Text fw={"bold"} span>
+                Keputusan Bupati Badung Nomor 99/049/HK/2019
+              </Text>
+              {" "} Tentang Pengelola Layanan Informasi dan Dokumentasi Kabupaten Badung
+              </Text>
+            </ListItem>
+            <ListItem fz={{ base: 'md', md: 'h4' }}>
+              <Text ta={"justify"} fz={{ base: 'md', md: 'h4' }}>
+              <Text fw={"bold"} span>
+                Keputusan Perbekel Darmasaba Nomor 101 Tahun 2019
+              </Text>
+              {" "}tentang Penetapan Pelaksana Teknis/Administrasi Pengelola Layanan Informasi
+                Dan Dokumentasi Di Desa Punggul
+              </Text>
+            </ListItem>
+            <ListItem fz={{ base: 'md', md: 'h4' }}>
+              <Text ta={"justify"} fz={{ base: 'md', md: 'h4' }}>
+              <Text fw={"bold"} span>
+                Peraturan Perbekel Darmasaba Nomor 12 Tahun 2019
+              </Text>
+              {" "}tentang Pedoman Pengelolaan Pelayanan Informasi Publik Dan Dokumentasi
+                Di Lingkungan Pemerintah Desa Darmasaba
+              </Text>
+            </ListItem>
+          </List>
+        </Paper>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;
diff --git a/src/app/darmasaba/(pages)/ppid/ikm/page.tsx b/src/app/darmasaba/(pages)/ppid/ikm/page.tsx
new file mode 100644
index 00000000..5f20eafc
--- /dev/null
+++ b/src/app/darmasaba/(pages)/ppid/ikm/page.tsx
@@ -0,0 +1,167 @@
+import colors from '@/con/colors';
+import { Stack, Box, Paper, Text, Center, Flex, ColorSwatch, } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import { BarChart, DonutChart } from '@mantine/charts';
+
+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"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box>
+        <Text ta={"center"} fz={{ base: "h2", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Indeks Kepuasan Masyarakat (IKM)
+        </Text>
+        <Text ta={"center"} fz={{ base: "h2", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Desa Darmasaba
+        </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>
+      </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>
+        </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>
+        </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>
+        </Paper>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;
diff --git a/src/app/darmasaba/(pages)/ppid/informasi/page.tsx b/src/app/darmasaba/(pages)/ppid/informasi/page.tsx
new file mode 100644
index 00000000..adad7c32
--- /dev/null
+++ b/src/app/darmasaba/(pages)/ppid/informasi/page.tsx
@@ -0,0 +1,85 @@
+import colors from '@/con/colors';
+import { ActionIcon, Box, Button, Center, Image, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import { IconDownload } from '@tabler/icons-react';
+
+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.",
+  },
+]
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+        Permohonan Informasi Publik
+      </Text>
+      <Box px={{ base: "md", md: 100 }}>
+        <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: 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>
+            <Center pb={30}>
+              <Button fz={"h5"} bg={colors['blue-button']} leftSection={<IconDownload size={20} color={colors['white-1']} />}>
+                Unduh Dokumen
+              </Button>
+            </Center>
+            <Image src={'/api/img/formulirpermohonan.png'} alt=''/>
+          </Paper>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;
diff --git a/src/app/darmasaba/(pages)/ppid/keberatan/page.tsx b/src/app/darmasaba/(pages)/ppid/keberatan/page.tsx
new file mode 100644
index 00000000..691ebcd7
--- /dev/null
+++ b/src/app/darmasaba/(pages)/ppid/keberatan/page.tsx
@@ -0,0 +1,117 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Center, Group, Paper, SimpleGrid, Stack, Text, Textarea, 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';
+
+const data = [
+    {
+        id: 1,
+        icon: <IconForms size={50} color={colors['white-1']} />,
+        title: "Formulir Online",
+        desc: "Isi formulir keberatan secara online.",
+    },
+    {
+        id: 2,
+        icon: <IconFileCheck size={50} color={colors['white-1']} />,
+        title: "Verifikasi",
+        desc: "Tim PPID akan memverifikasi permohonan Anda.",
+    },
+    {
+        id: 3,
+        icon: <IconHourglassOff size={50} color={colors['white-1']} />,
+        title: "Proses Keberatan",
+        desc: "Proses penyelesaian keberatan dalam waktu 30 hari kerja.",
+    },
+    {
+        id: 4,
+        icon: <IconPhoneRinging size={50} color={colors['white-1']} />,
+        title: "Hasil",
+        desc: "Hasil keberatan akan dikirim via email atau SMS.",
+    },
+]
+function Page() {
+    const router = useRouter();
+    return (
+        <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+            <Box px={{ base: 'md', md: 100 }}>
+                <BackButton />
+            </Box>
+            <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+                Permohonan Keberatan Informasi Publik
+            </Text>
+            <Box px={{ base: "md", md: 100 }}>
+                <Stack gap={'lg'}>
+                    <Paper p={"xl"} bg={colors['white-trans-1']}>
+                        <Box pb={30}>
+                            <Text fw={"bold"} fz={{ base: 'h4', md: 'h3' }}>Tentang Permohonan Keberatan</Text>
+                            <Text ta={"justify"} fz={{ base: 'md', md: 'h4' }}>Jika Anda merasa permohonan informasi yang diajukan tidak mendapatkan tanggapan yang memadai atau ditolak, anda berhak mengajukan
+                                keberatan melalui formulir di bawah ini.</Text>
+                        </Box>
+                        <Text pb={20} ta={"center"} fw={"bold"} fz={{ base: 'h3', md: 'h2' }}>Bagaimana Mengajukan Keberatan?</Text>
+                        <SimpleGrid
+                            pb={30}
+                            cols={{
+                                base: 1,
+                                md: 4,
+                            }}>
+                            {data.map((v, k) => {
+                                return (
+                                    <Paper key={k} p={"xl"} bg={colors['blue-button']}>
+                                        <Stack justify='space-between'>
+                                            <Center>
+                                                {v.icon}
+                                            </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>
+                        <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>
+                            </Paper>
+                        </Group>
+                        <Text pt={20} ta={"center"} fz={'h3'} fw={"bold"}>Kontak PPID</Text>
+                        <Text ta={"center"} fz={"sm"}>Email: desadarmasaba@badungkab.go.id | WhatsApp: 081-xxx-xxx-xxx</Text>
+                    </Paper>
+                </Stack>
+            </Box>
+        </Stack>
+    );
+}
+
+export default Page;
diff --git a/src/app/darmasaba/(pages)/ppid/profile/page.tsx b/src/app/darmasaba/(pages)/ppid/profile/page.tsx
new file mode 100644
index 00000000..2750d7b6
--- /dev/null
+++ b/src/app/darmasaba/(pages)/ppid/profile/page.tsx
@@ -0,0 +1,112 @@
+import colors from '@/con/colors';
+import { Stack, Box, Text, Paper, Flex, Image, Divider, Center, SimpleGrid, List, ListItem } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+        Profil Singkat PPID Desa Darmasaba
+      </Text>
+      <Box px={{ base: "md", md: 100 }}>
+        <Paper p={"xl"} bg={colors['white-trans-1']}>
+          <Box px={{ base: "md", md: 100 }}>
+            <Flex align={"center"} gap={50}>
+              <Image src={"/api/img/darmasaba-icon.png"} h={{ base: 100, md: 150 }} alt='' />
+              <Text fz={{ base: "h3", md: "2.5rem" }} fw={'bold'}>PROFIL PIMPINAN BADAN PUBLIK DESA DARMASABA </Text>
+            </Flex>
+          </Box>
+          <Divider my={"md"} />
+          {/* biodata perbekel */}
+          <Box px={50} pb={30}>
+            <SimpleGrid
+              cols={{
+                base: 1,
+                md: 2,
+              }}
+            >
+              <Box px={{ base: 0, md: 80 }}>
+                <Paper bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+                  <Stack gap={0}>
+                    <Center>
+                      <Image pt={{ base: 0, md: 30 }} src={"/api/img/perbekel.png"} w={{ base: 250, md: 326 }} alt='' />
+                    </Center>
+                    <Paper
+                      bg={colors['blue-button']}
+                      py={30}
+                      className="glass3"
+                      px={{ base: 20, md: 20 }}
+
+                    >
+                      <Text ta={"center"} c={colors['white-1']} fw={"bolder"} fz={{ base: "md", md: "h3" }}>
+                        I.B. Surya Prabhawa Manuaba,
+                      </Text>
+                      <Text ta={"center"} c={colors['white-1']} fw={"bolder"} fz={{ base: "md", md: "h3" }}>
+                        S.H.,M.H.,NL.P.
+                      </Text>
+                    </Paper>
+                  </Stack>
+                </Paper>
+              </Box>
+              <Box>
+                <Box>
+                  <Text fz={{ base: "h3", md: "h2" }} fw={'bold'}>Biodata</Text>
+                  <Text fz={{ base: "md", md: "h3" }} ta={"justify"}>I.B Surya Prabhawa Manuaba, S.H., M.H., adalah Perbekel  Darmasaba periode 2021-2027, seorang advokat, pendiri Mantra Legal Consultants & Advocates, serta aktif di bidang musik dan akademis.</Text>
+                  <Text fz={{ base: "md", md: "h3" }} ta={"justify"}>Dia menempuh pendidikan hukum di Universitas Udayana dan Universitas Mahasaraswati Denpasar, serta memiliki pengalaman luas di berbagai organisasi dan kepemimpinan.</Text>
+                </Box>
+                <Box>
+                  <Text fz={{ base: "h3", md: "h2" }} fw={'bold'}>Riwayat Karir</Text>
+                  <Text fz={{ base: "md", md: "h3" }} >2021 - 2027: Perbekel Desa Darmasaba</Text>
+                  <Text fz={{ base: "md", md: "h3" }} >2015 - Sekarang: Founder & Managing Director Mantra Legal Consultants & Advocates</Text>
+                  <Text fz={{ base: "md", md: "h3" }} >2020 - Sekarang: Founder Ugawa Record Music Studio</Text>
+                  <Text fz={{ base: "md", md: "h3" }} >2010 - 2016: Dosen Fakultas Hukum Universitas Mahasaraswati Denpasar</Text>
+                </Box>
+              </Box>
+            </SimpleGrid>
+          </Box>
+          <Box pb={30}>
+            <Text fz={{ base: "h3", md: "h2" }} fw={'bold'}>Pengalaman Organisasi</Text>
+            <List>
+              <Box px={20}>
+                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>1996 - 1997: Ketua OSIS SMP Negeri 1 Abiansemal</ListItem>
+                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>1999 - 2000: Ketua OSIS SMA Negeri 1 Mengwi</ListItem>
+                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>2008 - 2009: Ketua BEM Universitas Mahasaraswati Denpasar</ListItem>
+                <ListItem fz={{ base: "md", md: "h3" }} >2008 - 2010: Ketua Sekaa Taruna Sila Dharma, Banjar Tengah, Desa Adat Tegal, Darmasaba</ListItem>
+                <ListItem fz={{ base: "md", md: "h3" }} >2020 - Sekarang: Pengurus Young Lawyer Committee Peradi Denpasar</ListItem>
+                <ListItem fz={{ base: "md", md: "h3" }} >2021 - Sekarang: Dewan Kehormatan Himpunan Pengusaha Muda Indonesia (HIPMI) Badung</ListItem>
+                <ListItem fz={{ base: "md", md: "h3" }} >2023 - 2028: Komite Tetap Advokasi - Bidang Hukum dan Regulasi Kamar Dagang dan Industri Badung</ListItem>
+              </Box>
+            </List>
+          </Box>
+          <Box pb={20}>
+            <Text pb={20} fz={{ base: "h3", md: "h2" }} fw={'bold'}>Program Kerja Unggulan</Text>
+            <Text fz={{ base: "md", md: "h3" }} fw={'bold'}>Pemberdayaan Ekonmi dan UMKM</Text>
+            <List>
+              <Box px={20}>
+                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Pelatihan dan pendampingan UMKM lokal</ListItem>
+                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Program bantuan modal usaha bagi pelaku usaha kecil</ListItem>
+                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Digitalisasi UMKM untuk meningkatkan pemasaran produk lokal</ListItem>
+              </Box>
+            </List>
+          </Box>
+          <Box>
+            <Text fz={{ base: "md", md: "h3" }} fw={'bold'}>Peningkatan Infrastruktur Desa</Text>
+            <List>
+              <Box px={20}>
+                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Pembangunan dan perbaikan jalan desa</ListItem>
+                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Penyediaan fasilitas umum dan ruang terbuka hijau</ListItem>
+                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Optimalisasi layanan publik berbasis digital</ListItem>
+              </Box>
+            </List>
+          </Box>
+        </Paper>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;
diff --git a/src/app/darmasaba/(pages)/ppid/struktur/page.tsx b/src/app/darmasaba/(pages)/ppid/struktur/page.tsx
new file mode 100644
index 00000000..6b509e6f
--- /dev/null
+++ b/src/app/darmasaba/(pages)/ppid/struktur/page.tsx
@@ -0,0 +1,24 @@
+import colors from '@/con/colors';
+import { Stack, Box, Paper, Text, Image } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+        Struktur PPID Desa Darmasaba
+      </Text>
+      <Box px={{ base: "md", md: 100 }}>
+        <Paper p={"xl"} bg={colors['white-trans-1']}>
+          <Image src={"/api/img/struktur-ppid.png"} alt='' />
+        </Paper>
+      </Box>
+    </Stack>
+  );
+}
+
+      export default Page;
diff --git a/src/app/darmasaba/(pages)/ppid/visimisi/page.tsx b/src/app/darmasaba/(pages)/ppid/visimisi/page.tsx
new file mode 100644
index 00000000..d09cf621
--- /dev/null
+++ b/src/app/darmasaba/(pages)/ppid/visimisi/page.tsx
@@ -0,0 +1,56 @@
+import colors from '@/con/colors';
+import { Stack, Box, Paper, Text, Image, Center, ListItem, List } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../desa/layanan/_com/BackButto';
+
+function Page() {
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          <Paper p={"xl"} bg={colors['white-trans-1']}>
+            <Box pb={30}>
+              <Center>
+                <Image src={"/api/img/darmasaba-icon.png"} w={{ base: 100, md: 150 }} alt='' />
+              </Center>
+              <Text ta={"center"} fz={{ base: "h2", md: "2.5rem" }} fw={"bold"}>
+                MOTO PPID DESA DARMASABA
+              </Text>
+              <Text ta={"center"} fz={{ base: "h4", md: "h3" }} >
+                MEMBERIKAN INFORMASI YANG CEPAT, MUDAH, TEPAT DAN TRANSPARAN
+              </Text>
+            </Box>
+            <Box px={{ base: 20, md: 50 }} pb={30}>
+              <Text ta={"center"} fz={{ base: "h3", md: "h2" }} fw={"bold"}>
+                VISI PPID
+              </Text>
+              <Text fz={{ base: "md", md: "h3" }} ta={"justify"}>
+                Memberikan pelayanan informasi yanng transparan dan akuntabel untuk memenuhi hak pemohon informasi
+                sesuai dengan ketentuan peraturan perundang-undangan yang berlaku.
+              </Text>
+            </Box>
+            <Box px={{ base: 20, md: 50 }}>
+              <Text ta={"center"} fz={{ base: "h3", md: "h2" }} fw={"bold"}>
+                MISI PPID
+              </Text>
+              <Box px={20} >
+                <List type='ordered'>
+                  <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Meningkatkan pengelolaan dan pelayanan informasi yang berkualitas, benar dan bertanggung jawab</ListItem>
+                  <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Membangun dan mengembangkan sistem penyediaan dan layanan informasi.</ListItem>
+                  <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Meningkatkan dan mengembangkan kompetensi dan kualitas SDM dalam bidang pelayanan informasi.</ListItem>
+                  <ListItem fz={{ base: "md", md: "h3" }} >Mewujudkan keterbukaan informasi Pemerintah Desa Punggul dengan proses yang cepat, tepat, mudah
+                    dan sederhana.</ListItem>
+                </List>
+              </Box>
+            </Box>
+          </Paper>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;
diff --git a/src/app/darmasaba/(tambahan)/permohonan/berhasil/page.tsx b/src/app/darmasaba/(tambahan)/permohonan/berhasil/page.tsx
new file mode 100644
index 00000000..195ded3f
--- /dev/null
+++ b/src/app/darmasaba/(tambahan)/permohonan/berhasil/page.tsx
@@ -0,0 +1,38 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+
+function Page() {
+    const router = useRouter();
+    return (
+        <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+            <Box px={{ base: 'md', md: 100 }}>
+                <Stack h={'80vh'} justify='center'>
+                    <Box>
+                        <Paper p={"lg"} bg={'#DEF0D8'}>
+                            <Text fw={"bold"} ta={"center"} fz={'h2'} c={'#3C7745'}>Permohonan Berhasil Dikirim</Text>
+                        </Paper>
+                    </Box>
+                    <Box>
+                        <Paper px={{ base: 'md', md: 100 }} p={"lg"} bg={colors['white-trans-1']}>
+                            <Stack justify='space-between'>
+                                <Text fw={"bold"} ta={"center"} fz={'h2'} >Terima Kasih!</Text>
+                                <Text ta={"center"} fz={"h4"}>Permohonan keberatan Anda telah berhasil dikirim. Tim PPID Desa akan meninjau
+                                    permohonan Anda dan memberikan tanggapan dalam waktu yang
+                                    ditentukan.</Text>
+                                <Text ta={"center"} fz={"h4"}>Jika Anda memiliki pertanyaan lebih lanjut, silakan hubungi kami melalui kontak
+                                    yang tersedia.</Text>
+                                <Group justify='center'>
+                                    <Button onClick={() => router.push('/darmasaba')} p={'sm'} bg={colors['blue-button']} >Kembali ke Beranda</Button>
+                                </Group>
+                            </Stack>
+                        </Paper>
+                    </Box>
+                </Stack>
+            </Box>
+        </Stack>
+    );
+}
+
+export default Page;
diff --git a/src/app/darmasaba/(tambahan)/permohonan/gagal/page.tsx b/src/app/darmasaba/(tambahan)/permohonan/gagal/page.tsx
new file mode 100644
index 00000000..69da2f21
--- /dev/null
+++ b/src/app/darmasaba/(tambahan)/permohonan/gagal/page.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Page
+    </div>
+  );
+}
+
+export default Page;
diff --git a/src/con/navbar-list-menu.ts b/src/con/navbar-list-menu.ts
index bc1ac10b..5c401d1c 100644
--- a/src/con/navbar-list-menu.ts
+++ b/src/con/navbar-list-menu.ts
@@ -7,7 +7,7 @@ const navbarListMenu = [
             {
                 id: "1.1",
                 name: "Profile PPID",
-                href: "/darmasaba/ppid/profileppid"
+                href: "/darmasaba/ppid/profile"
             },
             {
                 id: "1.2",
@@ -17,12 +17,12 @@ const navbarListMenu = [
             {
                 id: "1.3",
                 name: "Visi Misi PPID",
-                href: "/darmasaba/ppid/visi"
+                href: "/darmasaba/ppid/visimisi"
             },
             {
                 id: "1.4",
                 name: "Dasar Hukum",
-                href: "/darmasaba/ppid/hukum"
+                href: "/darmasaba/ppid/dasarhukum"
             },
             {
                 id: "1.5",
@@ -32,7 +32,7 @@ const navbarListMenu = [
             {
                 id: "1.6",
                 name: "Permohonan Keberatan Informasi Publik",
-                href: "/darmasaba/ppid/permohonan"
+                href: "/darmasaba/ppid/keberatan"
             },
             {
                 id: "1.7",