From 49067f021867bfaadb7a7626170b9f6c2bd2cd9e Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Tue, 19 Aug 2025 17:40:59 +0800
Subject: [PATCH] Add Detail Semua Polsek, Submenu Polsek Terdekat, Menu
 Keamanan

---
 prisma/schema.prisma                          |   2 +-
 .../_state/landing-page/indeks-kepuasan.ts    |   8 +-
 .../daftarInformasiPublik.ts                  |  39 +-
 .../page.tsx                                  |  12 +-
 .../responden/[id]/edit/page.tsx              |  14 +-
 .../indeks_kepuasan/responden/create.ts       |   8 +-
 .../indeks_kepuasan/responden/updt.ts         |  61 +-
 .../ppid/daftar_informasi_publik/find-many.ts |  44 +-
 .../polsek-terdekat/semua-polsek/page.tsx     |  97 ++-
 .../page.tsx                                  |  46 +-
 src/app/percobaan/index.html                  | 579 +++++++++---------
 11 files changed, 541 insertions(+), 369 deletions(-)

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 8b48f326..666a05fa 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -223,7 +223,7 @@ model KategoriPrestasiDesa {
 model Responden {
   id             String                 @id @default(cuid())
   name           String                 @unique
-  tanggal        DateTime // misal: 2025-05-01
+  tanggal        String // misal: 2025-05-01
   jenisKelamin   JenisKelaminResponden  @relation(fields: [jenisKelaminId], references: [id])
   jenisKelaminId String
   rating         PilihanRatingResponden @relation(fields: [ratingId], references: [id])
diff --git a/src/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan.ts b/src/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan.ts
index 504f0c11..48d707b7 100644
--- a/src/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan.ts
+++ b/src/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan.ts
@@ -181,7 +181,13 @@ const responden = proxy({
           headers: {
             "Content-Type": "application/json",
           },
-          body: JSON.stringify(this.form),
+          body: JSON.stringify({
+            name: this.form.name,
+            tanggal: this.form.tanggal,
+            jenisKelaminId: this.form.jenisKelaminId,
+            ratingId: this.form.ratingId,
+            kelompokUmurId: this.form.kelompokUmurId,
+          }),
         });
         const result = await response.json();
         if (!response.ok || !result?.success) {
diff --git a/src/app/admin/(dashboard)/_state/ppid/daftar_informasi_publik/daftarInformasiPublik.ts b/src/app/admin/(dashboard)/_state/ppid/daftar_informasi_publik/daftarInformasiPublik.ts
index fba89a42..61f0f23b 100644
--- a/src/app/admin/(dashboard)/_state/ppid/daftar_informasi_publik/daftarInformasiPublik.ts
+++ b/src/app/admin/(dashboard)/_state/ppid/daftar_informasi_publik/daftarInformasiPublik.ts
@@ -49,35 +49,38 @@ const daftarInformasiPublik = proxy({
     },
   },
   findMany: {
-    data: null as any[] | null,
+    data: null as
+      | Prisma.DaftarInformasiPublikGetPayload<{
+          omit: {
+            isActive: true;
+          };
+        }>[]
+      | null,
     page: 1,
     totalPages: 1,
-    total: 0,
     loading: false,
-    load: async (page = 1, limit = 10) => {  // Change to arrow function
-      daftarInformasiPublik.findMany.loading = true;  // Use the full path to access the property
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      daftarInformasiPublik.findMany.loading = true; // ✅ Akses langsung via nama path
       daftarInformasiPublik.findMany.page = page;
-      try {
-        const res = await ApiFetch.api.ppid.daftarinformasipublik[
-          "find-many"
-        ].get({
-          query: { page, limit },
-        });
+      daftarInformasiPublik.findMany.search = search;
   
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.ppid.daftarinformasipublik["find-many"].get({ query });
+    
         if (res.status === 200 && res.data?.success) {
-          daftarInformasiPublik.findMany.data = res.data.data || [];
-          daftarInformasiPublik.findMany.total = res.data.total || 0;
-          daftarInformasiPublik.findMany.totalPages = res.data.totalPages || 1;
+          daftarInformasiPublik.findMany.data = res.data.data ?? [];
+          daftarInformasiPublik.findMany.totalPages = res.data.totalPages ?? 1;
         } else {
-          console.error("Failed to load daftar informasi publik:", res.data?.message);
           daftarInformasiPublik.findMany.data = [];
-          daftarInformasiPublik.findMany.total = 0;
           daftarInformasiPublik.findMany.totalPages = 1;
         }
-      } catch (error) {
-        console.error("Error loading daftar informasi publik:", error);
+      } catch (err) {
+        console.error("Gagal fetch daftar informasi publik paginated:", err);
         daftarInformasiPublik.findMany.data = [];
-        daftarInformasiPublik.findMany.total = 0;
         daftarInformasiPublik.findMany.totalPages = 1;
       } finally {
         daftarInformasiPublik.findMany.loading = false;
diff --git a/src/app/admin/(dashboard)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx b/src/app/admin/(dashboard)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx
index 4154f049..8a3064dd 100644
--- a/src/app/admin/(dashboard)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx
+++ b/src/app/admin/(dashboard)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx
@@ -106,8 +106,16 @@ function ListDaftarInformasi({ search }: { search: string }) {
                 {filteredData.map((item, index) => (
                   <TableTr key={item.id}>
                     <TableTd style={{ textAlign: 'center' }}>{index + 1}</TableTd>
-                    <TableTd style={{ wordWrap: 'break-word' }}>{item.jenisInformasi}</TableTd>
-                    <TableTd style={{ wordWrap: 'break-word' }} dangerouslySetInnerHTML={{ __html: item.deskripsi }}></TableTd>
+                    <TableTd style={{ wordWrap: 'break-word' }}>
+                      <Box w={200}>
+                        <Text fz={"md"} truncate={"end"} lineClamp={1}>{item.jenisInformasi}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd style={{ wordWrap: 'break-word' }}>
+                      <Box w={200}>
+                        <Text fz={"md"} truncate={"end"} lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }}></Text>
+                      </Box>
+                    </TableTd>
                     <TableTd style={{ textAlign: 'center' }}>
                       <Button bg={"green"} onClick={() => router.push(`/admin/ppid/daftar-informasi-publik-desa-darmasaba/${item.id}`)}>
                         <IconDeviceImacCog size={25} />
diff --git a/src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/responden/[id]/edit/page.tsx b/src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/responden/[id]/edit/page.tsx
index 8c153eaa..7d9f6e55 100644
--- a/src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/responden/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/responden/[id]/edit/page.tsx
@@ -41,15 +41,11 @@ function EditResponden() {
       try {
         const data = await state.update.load(id);
         if (data) {
-          const formattedDate = data.tanggal && !isNaN(new Date(data.tanggal).getTime())
-            ? new Date(data.tanggal).toISOString().split('T')[0]
-            : '';
-          // ⬇️ FIX PENTING: tambahkan ini
           state.update.id = id;
 
           state.update.form = {
             name: data.name,
-            tanggal: formattedDate,
+            tanggal: data.tanggal,
             jenisKelaminId: data.jenisKelaminId,
             ratingId: data.ratingId,
             kelompokUmurId: data.kelompokUmurId,
@@ -76,6 +72,7 @@ function EditResponden() {
 
   const handleSubmit = async () => {
     state.update.id = id;
+    state.update.form = { ...formData }; // <-- sinkronisasi manual
     await state.update.submit();
     router.push('/admin/ppid/ikm-desa-darmasaba/responden')
   }
@@ -103,12 +100,15 @@ function EditResponden() {
             }}
           />
           <TextInput
+            label="Tanggal"
             type="date"
-            value={formData.tanggal}
+            placeholder='Pilih tanggal'
+            value={formData.tanggal ? new Date(formData.tanggal).toISOString().split('T')[0] : ''}
             onChange={(e) => {
+              const selectedDate = e.currentTarget.value;
               setFormData({
                 ...formData,
-                tanggal: e.currentTarget.value, // ✅ sudah format YYYY-MM-DD
+                tanggal: selectedDate,
               });
             }}
           />
diff --git a/src/app/api/[[...slugs]]/_lib/landing_page/indeks_kepuasan/responden/create.ts b/src/app/api/[[...slugs]]/_lib/landing_page/indeks_kepuasan/responden/create.ts
index b1858818..1778c8a9 100644
--- a/src/app/api/[[...slugs]]/_lib/landing_page/indeks_kepuasan/responden/create.ts
+++ b/src/app/api/[[...slugs]]/_lib/landing_page/indeks_kepuasan/responden/create.ts
@@ -15,16 +15,12 @@ export default async function respondenCreate(context: Context) {
     try {
         // Convert the date string to a Date object
         const tanggal = new Date(body.tanggal);
-        
-        // Validate the date
-        if (isNaN(tanggal.getTime())) {
-            throw new Error('Tanggal tidak valid');
-        }
+
 
         const result = await prisma.responden.create({
             data: {
                 name: body.name,
-                tanggal: tanggal, // Use the Date object
+                tanggal: tanggal.toISOString(), // Use the Date object
                 jenisKelaminId: body.jenisKelaminId,
                 ratingId: body.ratingId,
                 kelompokUmurId: body.kelompokUmurId,
diff --git a/src/app/api/[[...slugs]]/_lib/landing_page/indeks_kepuasan/responden/updt.ts b/src/app/api/[[...slugs]]/_lib/landing_page/indeks_kepuasan/responden/updt.ts
index 13252ae0..87557671 100644
--- a/src/app/api/[[...slugs]]/_lib/landing_page/indeks_kepuasan/responden/updt.ts
+++ b/src/app/api/[[...slugs]]/_lib/landing_page/indeks_kepuasan/responden/updt.ts
@@ -2,35 +2,40 @@ import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
 type FormUpdate = {
-    name: string;
-    tanggal: string;
-    jenisKelaminId: string;
-    ratingId: string;
-    kelompokUmurId: string;
-}
+  name: string;
+  tanggal: string;
+  jenisKelaminId: string;
+  ratingId: string;
+  kelompokUmurId: string;
+};
 
 export default async function respondenUpdate(context: Context) {
-    const body = (await context.body) as FormUpdate;
-    const id = context.params.id as string;
+  const body = (await context.body) as FormUpdate;
+  const id = context.params.id as string;
 
-    try {
-        const result = await prisma.responden.update({
-            where: { id },
-            data: {
-                name: body.name,
-                tanggal: body.tanggal,
-                jenisKelaminId: body.jenisKelaminId,
-                ratingId: body.ratingId,
-                kelompokUmurId: body.kelompokUmurId,
-            },
-        });
-        return {
-            success: true,
-            message: "Berhasil mengupdate responden",
-            data: result,
-        };
-    } catch (error) {
-        console.error("Error updating responden:", error);
-        throw new Error("Gagal mengupdate responden: " + (error as Error).message);
-    }
+  try {
+    const result = await prisma.responden.update({
+      where: { id },
+      data: {
+        name: body.name,
+        tanggal: new Date(body.tanggal).toISOString(),
+        jenisKelaminId: body.jenisKelaminId,
+        ratingId: body.ratingId,
+        kelompokUmurId: body.kelompokUmurId,
+      },
+    });
+    return {
+      success: true,
+      message: "Berhasil mengupdate responden",
+      data: result,
+    };
+  } catch (error) {
+    console.error("Error updating responden:", error);
+    // Instead of throwing an error, return a proper JSON response
+    return {
+      success: false,
+      message: "Gagal mengupdate responden: " + (error as Error).message,
+      data: null,
+    };
+  }
 }
diff --git a/src/app/api/[[...slugs]]/_lib/ppid/daftar_informasi_publik/find-many.ts b/src/app/api/[[...slugs]]/_lib/ppid/daftar_informasi_publik/find-many.ts
index 36676115..c893b04a 100644
--- a/src/app/api/[[...slugs]]/_lib/ppid/daftar_informasi_publik/find-many.ts
+++ b/src/app/api/[[...slugs]]/_lib/ppid/daftar_informasi_publik/find-many.ts
@@ -1,44 +1,54 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
-// Di findMany.ts
-export default async function daftarInformasiPublikFindMany(context: Context) {
+async function daftarInformasiPublikFindMany(context: Context) {
+  // Ambil parameter dari query
   const page = Number(context.query.page) || 1;
   const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || '';
   const skip = (page - 1) * limit;
 
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { jenisInformasi: { contains: search, mode: 'insensitive' } },
+      { deskripsi: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
   try {
+    // Ambil data dan total count secara paralel
     const [data, total] = await Promise.all([
       prisma.daftarInformasiPublik.findMany({
-        where: { isActive: true },
+        where,
         skip,
         take: limit,
         orderBy: { createdAt: 'desc' },
       }),
-      prisma.daftarInformasiPublik.count({
-        where: { isActive: true }
-      })
+      prisma.daftarInformasiPublik.count({ where }),
     ]);
 
-    const totalPages = Math.ceil(total / limit);
-
     return {
       success: true,
-      message: "Success fetch daftar informasi publik with pagination",
+      message: "Berhasil ambil daftar informasi publik dengan pagination",
       data,
       page,
-      totalPages,
+      limit,
       total,
+      totalPages: Math.ceil(total / limit),
     };
   } catch (e) {
-    console.error("Find many paginated error:", e);
+    console.error("Error di findMany paginated:", e);
     return {
       success: false,
-      message: "Failed fetch daftar informasi publik with pagination",
-      data: [],
-      page: 1,
-      totalPages: 1,
-      total: 0,
+      message: "Gagal mengambil data daftar informasi publik",
     };
   }
-}
\ No newline at end of file
+}
+
+export default daftarInformasiPublikFindMany;
\ No newline at end of file
diff --git a/src/app/darmasaba/(pages)/keamanan/polsek-terdekat/semua-polsek/page.tsx b/src/app/darmasaba/(pages)/keamanan/polsek-terdekat/semua-polsek/page.tsx
index 69da2f21..47886d21 100644
--- a/src/app/darmasaba/(pages)/keamanan/polsek-terdekat/semua-polsek/page.tsx
+++ b/src/app/darmasaba/(pages)/keamanan/polsek-terdekat/semua-polsek/page.tsx
@@ -1,10 +1,99 @@
-import React from 'react';
+'use client'
+import polsekTerdekatState from '@/app/admin/(dashboard)/_state/keamanan/polsek-terdekat';
+import colors from '@/con/colors';
+import { Box, Button, Center, Grid, GridCol, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconNavigation, IconSearch } from '@tabler/icons-react';
+import React, { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import BackButton from '../../../desa/layanan/_com/BackButto';
+import { useRouter } from 'next/navigation';
 
 function Page() {
+  const state = useProxy(polsekTerdekatState);
+  const [search, setSearch] = useState('');
+  const router = useRouter()
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany;
+
+  useShallowEffect(() => {
+    load(page, 3, search)
+  }, [page, search])
+
+  if (loading || !data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
+
   return (
-    <div>
-      Page
-    </div>
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Grid align='center' px={{ base: 'md', md: 100 }}>
+        <GridCol span={{ base: 12, md: 9 }}>
+          <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+            Semua Polsek Terdekat
+          </Text>
+        </GridCol>
+        <GridCol span={{ base: 12, md: 3 }}>
+          <TextInput
+            radius={"lg"}
+            placeholder='Cari Polsek'
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            leftSection={<IconSearch size={20} />}
+            w={{ base: "50%", md: "100%" }}
+          />
+        </GridCol>
+      </Grid>
+      <Box px={{ base: "md", md: 100 }}>
+        <SimpleGrid
+          cols={{
+            base: 1,
+            md: 3,
+          }}
+        >
+          {data.map((v, k) => {
+            return (
+              <Paper p={"xl"} bg={colors['white-trans-1']} key={k}>
+                <Stack gap={"xs"}>
+                  <Text fw={"bold"} fz={"h3"}>{v.nama}</Text>
+                  <Text>Alamat: {v.alamat}</Text>
+                  <Text>Jarak: {v.jarakKeDesa}</Text>
+                  <Text>Telepon: {v.nomorTelepon}</Text>
+                  <Text>Jam Operasional: {v.jamOperasional}</Text>
+                  <Box pt={20}>
+                    <iframe style={{ border: 2, width: "100%" }} src={v.embedMapUrl} width="550" height="300" ></iframe>
+                  </Box>
+                  <Box pt={20}>
+                    <Button onClick={() => router.push(v.linkPetunjukArah)} fullWidth bg={colors["blue-button"]} radius={10} leftSection={<IconNavigation size={20} />}>Petunjuk Arah</Button>
+                  </Box>
+                </Stack>
+              </Paper>
+            )
+          })}
+        </SimpleGrid>
+      </Box>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
+    </Stack>
   );
 }
 
diff --git a/src/app/darmasaba/(pages)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx b/src/app/darmasaba/(pages)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx
index 894a650b..9f85b5ee 100644
--- a/src/app/darmasaba/(pages)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx
+++ b/src/app/darmasaba/(pages)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx
@@ -1,18 +1,32 @@
 'use client'
+
 import daftarInformasiPublik from '@/app/admin/(dashboard)/_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
 import colors from '@/con/colors';
-import { Box, Center, Image, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, TextInput } from '@mantine/core';
+import { Box, Center, Image, Pagination, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, TextInput } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconSearch } from '@tabler/icons-react';
+import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
 
 function Page() {
   const listData = useProxy(daftarInformasiPublik)
+  const [search, setSearch] = useState('')
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = listData.findMany
+
+
   useShallowEffect(() => {
-    listData.findMany.load()
-  }, [])
-  if (!listData.findMany.data) return <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    load(page, 5, search)
+  }, [page, search])
+
+  if (loading || !data) return <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
     <Box px={{ base: 'md', md: 100 }}>
       <Skeleton h={40} />
     </Box>
@@ -40,6 +54,9 @@ function Page() {
           <TextInput
             placeholder='Cari Informasi...'
             leftSection={<IconSearch size={20} />}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            style={{ marginBottom: 16 }}
           />
           <Table withRowBorders withColumnBorders withTableBorder>
             <TableThead bg={colors['blue-button']}>
@@ -54,8 +71,17 @@ function Page() {
               {listData.findMany.data?.map((item, index) => (
                 <TableTr key={item.id}>
                   <TableTd ta={'center'}>{index + 1}</TableTd>
-                  <TableTd>{item.jenisInformasi}</TableTd>
-                  <TableTd dangerouslySetInnerHTML={{ __html: item.deskripsi }}></TableTd>
+                  <TableTd>
+                    <Text fz={'md'}>
+                      {item.jenisInformasi}
+                    </Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text
+                      fz={'md'}
+                      dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                    />
+                  </TableTd>
                   <TableTd style={{ width: '20%', textAlign: 'center' }}>{item.tanggal
                     ? new Date(item.tanggal).toLocaleDateString('id-ID')
                     : '-'}</TableTd>
@@ -64,6 +90,14 @@ function Page() {
             </TableTbody>
           </Table>
         </Stack>
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => load(newPage)}
+            total={totalPages}
+            my={"md"}
+          />
+        </Center>
         <Text pt={20} fz={'h4'} fw={"bold"}>Kontak PPID</Text>
         <Text fz={'sm'}>Email: ppid@desadarmasaba.id  |  WhatsApp: 081-xxx-xxx-xxx</Text>
       </Box>
diff --git a/src/app/percobaan/index.html b/src/app/percobaan/index.html
index 22d41e8d..00eb89e3 100644
--- a/src/app/percobaan/index.html
+++ b/src/app/percobaan/index.html
@@ -267,284 +267,262 @@
           </li>
       </ul>
 
-       <!-- SubMenu Indeks Kepuasan Masayarakat (IKM) (Landing Page - PPID) -->
-      <h4>Indeks Kepuasan Masayarakat (IKM) (Landing Page - PPID)</h4>
-       <!-- List Responden -->
-       <h4>List Desa Anti Korupsi</h4>
-       <ul>
-         <li>
-             <input type="checkbox" id="19" /> <label for="19">Search sudah berfungsi</label>
-           </li>
-         <li>
-           <input type="checkbox" id="20" /> <label for="20">Data tampil di halaman list</label>
+      <!-- SubMenu Indeks Kepuasan Masayarakat (IKM) (Landing Page - PPID) -->
+     <h4>Indeks Kepuasan Masayarakat (IKM) (Landing Page - PPID)</h4>
+     <!-- List Responden -->
+     <h4>List Responden</h4>
+     <ul>
+       <li>
+           <input type="checkbox" id="33" /> 
+           <label for="33">Search sudah berfungsi</label>
+         </li>
+       <li>
+         <input type="checkbox" id="34" /> 
+         <label for="34">Data tampil di halaman list</label>
+       </li>
+       <li>
+         <input type="checkbox" id="35" />
+         <label for="35">Create list responden</label>
+       </li>
+       <li>
+           <input type="checkbox" id="36" />
+           <label for="36">Detail mau tampil datanya</label>
+         </li>
+       <li>
+         <input type="checkbox" id="37" />
+         <label for="37">Hapus list responden bekerja</label>
+       </li>
+       <li>
+           <input type="checkbox" id="38" />
+           <label for="38">Edit / Update list responden bekerja</label>
+         </li>
+        <li>
+           <input type="checkbox" id="39" />
+           <label for="39">Pagination bekerja</label>
          </li>
          <li>
-           <input type="checkbox" id="21" />
-           <label for="21">Create list desa anti korupsi</label>
-         </li>
-         <li>
-             <input type="checkbox" id="22" />
-             <label for="22">Detail mau tampil datanya</label>
-           </li>
-         <li>
-           <input type="checkbox" id="23" />
-           <label for="23">Hapus list desa anti korupsi bekerja</label>
-         </li>
-         <li>
-             <input type="checkbox" id="24" />
-             <label for="24">Edit / Update list desa anti korupsi bekerja</label>
-           </li>
-           <li>
-            <h4>List Responden</h4>
-            <ul>
-              <li>
-                  <input type="checkbox" id="33" /> 
-                  <label for="33">Search sudah berfungsi</label>
-                </li>
-              <li>
-                <input type="checkbox" id="34" />
-                <label for="34">Data tampil di halaman list</label>
-              </li>
-              <li>
-                <input type="checkbox" id="35" />
-                <label for="35">Create list responden</label>
-              </li>
-              <li>
-                  <input type="checkbox" id="36" />
-                  <label for="36">Detail mau tampil datanya</label>
-                </li>
-              <li>
-                <input type="checkbox" id="37" />
-                <label for="37">Hapus list responden bekerja</label>
-              </li>
-              <li>
-                  <input type="checkbox" id="38" />
-                  <label for="38">Edit / Update list responden bekerja</label>
-                </li>
-                <li>
-                  <input type="checkbox" id="39" />
-                  <label for="39">Pagination bekerja</label>
-                </li>
-                <li>
-                  <input type="checkbox" id="40" />
-                  <label for="40">Sinkronisasi ke UI</label>
-                </li>
-            </ul>
+          <input type="checkbox" id="40" />
+          <label for="40">Sinkronisasi ke UI</label>
+        </li>
 
-      <!-- SubMenu SDGs Desa -->
-      <h4>SDGs Desa</h4>
-      <!-- List SDGs Desa -->
-      <h4>List SDGs Desa</h4>
+    </ul>
+
+    <!-- SubMenu SDGs Desa -->
+    <h4>SDGs Desa</h4>
+    <!-- List SDGs Desa -->
+    <h4>List SDGs Desa</h4>
+    <ul>
+      <li>
+        <input type="checkbox" id="41" />
+        <label for="41">Search sudah berfungsi</label>
+      </li>
+      <li>
+        <input type="checkbox" id="42" />
+        <label for="42">Data tampil di halaman list</label>
+      </li>
+      <li>
+        <input type="checkbox" id="43" />
+        <label for="43">Create list SDGs Desa</label>
+      </li>
+      <li>
+        <input type="checkbox" id="44" />
+        <label for="44">Detail mau tampil datanya</label>
+      </li>
+      <li>
+        <input type="checkbox" id="45" />
+        <label for="45">Hapus list SDGs Desa bekerja</label>
+      </li>
+      <li>
+        <input type="checkbox" id="46" />
+        <label for="46">Edit / Update list SDGs Desa bekerja</label>
+      </li>
+      <li>
+        <input type="checkbox" id="47" />
+        <label for="47">Pagination bekerja</label>
+      </li>
+      <li>
+        <input type="checkbox" id="48" />
+        <label for="48">Sinkronisasi ke UI</label>
+      </li>
+    </ul>
+
+     <!-- SubMenu APBDes -->
+     <h4>APBDes</h4>
+     <!-- List APBDes -->
+     <h4>List APBDes</h4>
+     <ul>
+       <li>
+         <input type="checkbox" id="49" />
+         <label for="49">Search sudah berfungsi</label>
+       </li>
+       <li>
+         <input type="checkbox" id="50" />
+         <label for="50">Data tampil di halaman list</label>
+       </li>
+       <li>
+         <input type="checkbox" id="51" />
+         <label for="51">Create list APBDes</label>
+       </li>
+       <li>
+         <input type="checkbox" id="52" />
+         <label for="52">Detail mau tampil datanya</label>
+       </li>
+       <li>
+         <input type="checkbox" id="53" />
+         <label for="53">Hapus list APBDes bekerja</label>
+       </li>
+       <li>
+         <input type="checkbox" id="54" />
+         <label for="54">Edit / Update list APBDes bekerja</label>
+       </li>
+       <li>
+         <input type="checkbox" id="55" />
+         <label for="55">Pagination bekerja</label>
+       </li>
+       <li>
+         <input type="checkbox" id="56" />
+         <label for="56">Sinkronisasi ke UI</label>
+       </li>
+     </ul>
+
+      <!-- SubMenu Prestasi Desa -->
+      <h4>Prestasi Desa</h4>
+      <!-- List Prestasi Desa -->
+      <h4>List Prestasi Desa</h4>
       <ul>
         <li>
-          <input type="checkbox" id="41" /> 
-          <label for="41">Search sudah berfungsi</label>
+          <input type="checkbox" id="57" />
+          <label for="57">Search sudah berfungsi</label>
         </li>
         <li>
-          <input type="checkbox" id="42" /> 
-          <label for="42">Data tampil di halaman list</label>
+          <input type="checkbox" id="58" />
+          <label for="58">Data tampil di halaman list</label>
         </li>
         <li>
-          <input type="checkbox" id="43" />
-          <label for="43">Create list SDGs Desa</label>
+          <input type="checkbox" id="59" />
+          <label for="59">Create list Prestasi Desa</label>
         </li>
         <li>
-          <input type="checkbox" id="44" />
-          <label for="44">Detail mau tampil datanya</label>
+          <input type="checkbox" id="60" />
+          <label for="60">Detail mau tampil datanya</label>
         </li>
         <li>
-          <input type="checkbox" id="45" />
-          <label for="45">Hapus list SDGs Desa bekerja</label>
+          <input type="checkbox" id="61" />
+          <label for="61">Hapus list Prestasi Desa bekerja</label>
         </li>
         <li>
-          <input type="checkbox" id="46" />
-          <label for="46">Edit / Update list SDGs Desa bekerja</label>
+          <input type="checkbox" id="62" />
+          <label for="62">Edit / Update list Prestasi Desa bekerja</label>
         </li>
         <li>
-          <input type="checkbox" id="47" />
-          <label for="47">Pagination bekerja</label>
+          <input type="checkbox" id="63" />
+          <label for="63">Pagination bekerja</label>
         </li>
         <li>
-          <input type="checkbox" id="48" />
-          <label for="48">Sinkronisasi ke UI</label>
+          <input type="checkbox" id="64" />
+          <label for="64">Sinkronisasi ke UI</label>
         </li>
       </ul>
 
-      <!-- SubMenu APBDes -->
-      <h4>APBDes</h4>
-      <!-- List APBDes -->
-      <h4>List APBDes</h4>
-      <ul>
-        <li>
-          <input type="checkbox" id="49" /> 
-          <label for="49">Search sudah berfungsi</label>
-        </li>
-        <li>
-          <input type="checkbox" id="50" /> 
-          <label for="50">Data tampil di halaman list</label>
-        </li>
-        <li>
-          <input type="checkbox" id="51" />
-          <label for="51">Create list APBDes</label>
-        </li>
-        <li>
-          <input type="checkbox" id="52" />
-          <label for="52">Detail mau tampil datanya</label>
-        </li>
-        <li>
-          <input type="checkbox" id="53" />
-          <label for="53">Hapus list APBDes bekerja</label>
-        </li>
-        <li>
-          <input type="checkbox" id="54" />
-          <label for="54">Edit / Update list APBDes bekerja</label>
-        </li>
-        <li>
-          <input type="checkbox" id="55" />
-          <label for="55">Pagination bekerja</label>
-        </li>
-        <li>
-          <input type="checkbox" id="56" />
-          <label for="56">Sinkronisasi ke UI</label>
+       <!-- Menu PPID -->
+     <h3>Menu PPID</h3>
+
+     <!-- SubMenu Profile PPID -->
+     <h4>Profile PPID</h4>
+     <ul>
+       <li>
+         <input type="checkbox" id="65" />
+         <label for="65">Data tampil di halaman</label>
+       </li>
+       <li>
+         <input type="checkbox" id="66" />
+         <label for="66">Edit / Update Profile PPID</label>
+       </li>
+       <li>
+         <input type="checkbox" id="67" />
+         <label for="67">Sinkronisasi ke UI</label>
+       </li>
+     </ul>
+
+     <!-- SubMenu Struktur PPID -->
+     <h4>Struktur PPID</h4>
+     <h4>Pegawai</h4>
+     <ul>
+       <li>
+         <input type="checkbox" id="68" />
+         <label for="68">Search sudah berfungsi</label>
+       </li>
+       <li>
+         <input type="checkbox" id="69" />
+         <label for="69">Data tampil di halaman list</label>
+       </li>
+       <li>
+         <input type="checkbox" id="70" />
+         <label for="70">Create list Pegawai</label>
+       </li>
+       <li>
+         <input type="checkbox" id="71" />
+         <label for="71">Detail mau tampil datanya</label>
+       </li>
+       <li>
+         <input type="checkbox" id="72" />
+         <label for="72">Hapus list Pegawai bekerja</label>
+       </li>
+       <li>
+         <input type="checkbox" id="73" />
+         <label for="73">Edit / Update list Pegawai bekerja</label>
+       </li>
+       <li>
+         <input type="checkbox" id="74" />
+         <label for="74">Pagination bekerja</label>
+       </li>
+       <li>
+         <input type="checkbox" id="75" />
+         <label for="75">Sinkronisasi ke UI</label>
         </li>
       </ul>
 
-       <!-- SubMenu Prestasi Desa -->
-       <h4>Prestasi Desa</h4>
-       <!-- List Prestasi Desa -->
-       <h4>List Prestasi Desa</h4>
-       <ul>
-         <li>
-           <input type="checkbox" id="57" /> 
-           <label for="57">Search sudah berfungsi</label>
-         </li>
-         <li>
-           <input type="checkbox" id="58" /> 
-           <label for="58">Data tampil di halaman list</label>
-         </li>
-         <li>
-           <input type="checkbox" id="59" />
-           <label for="59">Create list Prestasi Desa</label>
-         </li>
-         <li>
-           <input type="checkbox" id="60" />
-           <label for="60">Detail mau tampil datanya</label>
-         </li>
-         <li>
-           <input type="checkbox" id="61" />
-           <label for="61">Hapus list Prestasi Desa bekerja</label>
-         </li>
-         <li>
-           <input type="checkbox" id="62" />
-           <label for="62">Edit / Update list Prestasi Desa bekerja</label>
-         </li>
-         <li>
-           <input type="checkbox" id="63" />
-           <label for="63">Pagination bekerja</label>
-         </li>
-         <li>
-           <input type="checkbox" id="64" />
-           <label for="64">Sinkronisasi ke UI</label>
-         </li>
-       </ul>
-
-      <!-- Menu PPID -->
-      <h3>Menu PPID</h3>
-      <!-- SubMenu Profile PPID -->
-      <h4>Profile PPID</h4>
-      <ul>
-        <li>
-          <input type="checkbox" id="65" /> 
-          <label for="65">Data tampil di halaman</label>
-        </li>
-        <li>
-          <input type="checkbox" id="66" />
-          <label for="66">Edit / Update Profile PPID</label>
-        </li>
-        <li>
-          <input type="checkbox" id="67" />
-          <label for="67">Sinkronisasi ke UI</label>
-        </li>
-      </ul>
-
-      <!-- SubMenu Struktur PPID -->
-      <h4>Struktur PPID</h4>
-      <h4>Pegawai</h4>
-      <ul>
-        <li>
-          <input type="checkbox" id="68" /> 
-          <label for="68">Search sudah berfungsi</label>
-        </li>
-        <li>
-          <input type="checkbox" id="69" /> 
-          <label for="69">Data tampil di halaman list</label>
-        </li>
-        <li>
-          <input type="checkbox" id="70" />
-          <label for="70">Create list Pegawai</label>
-        </li>
-        <li>
-          <input type="checkbox" id="71" />
-          <label for="71">Detail mau tampil datanya</label>
-        </li>
-        <li>
-          <input type="checkbox" id="72" />
-          <label for="72">Hapus list Pegawai bekerja</label>
-        </li>
-        <li>
-          <input type="checkbox" id="73" />
-          <label for="73">Edit / Update list Pegawai bekerja</label>
-        </li>
-        <li>
-          <input type="checkbox" id="74" />
-          <label for="74">Pagination bekerja</label>
-        </li>
-        <li>
-          <input type="checkbox" id="75" />
-          <label for="75">Sinkronisasi ke UI</label>
-        </li>
-      </ul>
       <h4>Posisi Organisasi PPID</h4>
-      <ul>
-        <li>
-          <input type="checkbox" id="76" /> 
-          <label for="76">Search sudah berfungsi</label>
-        </li>
-        <li>
-          <input type="checkbox" id="77" /> 
-          <label for="77">Data tampil di halaman list</label>
-        </li>
-        <li>
-          <input type="checkbox" id="78" />
-          <label for="78">Create list Posisi Organisasi PPID</label>
-        </li>
-        <li>
-          <input type="checkbox" id="79" />
-          <label for="79">Detail mau tampil datanya</label>
-        </li>
-        <li>
-          <input type="checkbox" id="80" />
-          <label for="80">Hapus list Posisi Organisasi PPID bekerja</label>
-        </li>
-        <li>
-          <input type="checkbox" id="81" />
-          <label for="81">Edit / Update list Posisi Organisasi PPID bekerja</label>
-        </li>
-        <li>
-          <input type="checkbox" id="82" />
-          <label for="82">Pagination bekerja</label>
-        </li>
-        <li>
-          <input type="checkbox" id="83" />
-          <label for="83">Sinkronisasi ke UI</label>
-        </li>
-      </ul>
+     <ul>
+       <li>
+         <input type="checkbox" id="76" />
+         <label for="76">Search sudah berfungsi</label>
+       </li>
+       <li>
+         <input type="checkbox" id="77" />
+         <label for="77">Data tampil di halaman list</label>
+       </li>
+       <li>
+         <input type="checkbox" id="78" />
+         <label for="78">Create list Posisi Organisasi PPID</label>
+       </li>
+       <li>
+         <input type="checkbox" id="79" />
+         <label for="79">Detail mau tampil datanya</label>
+       </li>
+       <li>
+         <input type="checkbox" id="80" />
+         <label for="80">Hapus list Posisi Organisasi PPID bekerja</label>
+       </li>
+       <li>
+         <input type="checkbox" id="81" />
+         <label for="81">Edit / Update list Posisi Organisasi PPID bekerja</label>
+       </li>
+       <li>
+         <input type="checkbox" id="82" />
+         <label for="82">Pagination bekerja</label>
+       </li>
+       <li>
+         <input type="checkbox" id="83" />
+         <label for="83">Sinkronisasi ke UI</label>
+       </li>
+     </ul>
 
       <!-- SubMenu Visi Misi PPID -->
       <h4>Visi Misi PPID</h4>
       <ul>
         <li>
-          <input type="checkbox" id="84" /> 
+          <input type="checkbox" id="84" />
           <label for="84">Data tampil di halaman</label>
         </li>
         <li>
@@ -558,27 +536,27 @@
       </ul>
 
       <!-- SubMenu Dasar Hukum PPID -->
-      <h4>Dasar Hukum PPID</h4>
-      <ul>
-        <li>
-          <input type="checkbox" id="87" /> 
-          <label for="87">Data tampil di halaman</label>
-        </li>
-        <li>
-          <input type="checkbox" id="88" />
-          <label for="88">Edit / Update Dasar Hukum PPID</label>
-        </li>
-        <li>
-          <input type="checkbox" id="89" />
-          <label for="89">Sinkronisasi ke UI</label>
-        </li>
-      </ul>
+     <h4>Dasar Hukum PPID</h4>
+     <ul>
+       <li>
+         <input type="checkbox" id="87" />
+         <label for="87">Data tampil di halaman</label>
+       </li>
+       <li>
+         <input type="checkbox" id="88" />
+         <label for="88">Edit / Update Dasar Hukum PPID</label>
+       </li>
+       <li>
+         <input type="checkbox" id="89" />
+         <label for="89">Sinkronisasi ke UI</label>
+       </li>
+     </ul>
 
       <!-- SubMenu Permohonan Informasi Publik -->
       <h4>Permohonan Informasi Publik</h4>
       <ul>
          <li>
-           <input type="checkbox" id="90" /> 
+           <input type="checkbox" id="90" />
            <label for="90">Data tampil di halaman</label>
          </li>
          <li>
@@ -591,22 +569,65 @@
          </li>
        </ul>
 
-         <!-- SubMenu Permohonan Keberatan Informasi Publik -->
-      <h4>Permohonan Keberatan Informasi Publik</h4>
-      <ul>
-         <li>
-           <input type="checkbox" id="93" /> 
-           <label for="93">Data tampil di halaman</label>
-         </li>
-         <li>
-           <input type="checkbox" id="94" />
-           <label for="94">Create Permohonan Keberatan Informasi Publik</label>
-         </li>
-         <li>
-           <input type="checkbox" id="95" />
-           <label for="95">Sinkronisasi ke UI</label>
-         </li>
-       </ul>
+       <!-- SubMenu Permohonan Keberatan Informasi Publik -->
+     <h4>Permohonan Keberatan Informasi Publik</h4>
+     <ul>
+        <li>
+          <input type="checkbox" id="93" />
+          <label for="93">Data tampil di halaman</label>
+        </li>
+        <li>
+          <input type="checkbox" id="94" />
+          <label for="94">Create Permohonan Keberatan Informasi Publik</label>
+        </li>
+        <li>
+          <input type="checkbox" id="95" />
+          <label for="95">Sinkronisasi ke UI</label>
+        </li>
+      </ul>
+
+       <!-- SubMenu Daftar Informasi Publik -->
+     <h4>Daftar Informasi Publik</h4>
+     <ul>
+      <li>
+        <input type="checkbox" id="96" />
+        <label for="96">Search sudah berfungsi</label>
+      </li>
+      <li>
+        <input type="checkbox" id="97" />
+        <label for="97">Data tampil di halaman list</label>
+      </li>
+      <li>
+        <input type="checkbox" id="98" />
+        <label for="98">Create list daftar informasi publik</label>
+      </li>
+      <li>
+        <input type="checkbox" id="99" />
+        <label for="99">Detail mau tampil datanya</label>
+      </li>
+      <li>
+        <input type="checkbox" id="100" />
+        <label for="100">Hapus list daftar informasi publik bekerja</label>
+      </li>
+      <li>
+        <input type="checkbox" id="101" />
+        <label for="101">Edit / Update list daftar informasi publik bekerja</label>
+      </li>
+      <li>
+        <input type="checkbox" id="102" />
+        <label for="102">Pagination bekerja</label>
+      </li>
+      <li>
+        <input type="checkbox" id="103" />
+        <label for="103">Sinkronisasi ke UI</label>
+      </li>
+    </ul>
+ 
+
+     
+
+ 
+
 
 
     </div>