Fix UI PPID:

Visi Misi PPID, Dasar Hukum, Daftar Informasi Publik

prisma/schema.prisma

@@ -107,7 +107,6 @@ model ProfilePPID {
 // ========================================= DAFTAR INFORMASI PUBLIK ========================================= //
 model DaftarInformasiPublik {
   id             String   @id @default(cuid())
-  nomor          Int      @default(autoincrement())
   jenisInformasi String
   deskripsi      String
   tanggal        String

src/app/admin/(dashboard)/_state/ppid/daftar_informasi_publik/daftarInformasiPublik.ts

@@ -5,61 +5,239 @@ import { proxy } from "valtio";
 import { z } from "zod";
 
 const templateDaftarInformasi = z.object({
-    jenisInformasi: z.string().min(3, "Jenis Informasi minimal 3 karakter"),
-    deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
-    tanggal: z.string().min(3, "Tanggal minimal 3 karakter"),
-})
+  jenisInformasi: z.string().min(3, "Jenis Informasi minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+  tanggal: z.string().min(3, "Tanggal minimal 3 karakter"),
+});
+
+const defaultForm = {
+  jenisInformasi: "",
+  deskripsi: "",
+  tanggal: "",
+};
 
 type DaftarInformasi = Prisma.DaftarInformasiPublikGetPayload<{
-    select: {
-        jenisInformasi: true;
-        deskripsi: true;
-        tanggal: true;
-    };
+  select: {
+    jenisInformasi: true;
+    deskripsi: true;
+    tanggal: true;
+  };
 }>;
 
-const daftarInformasi = proxy({
-    create: {
-        form: {} as DaftarInformasi,
-        loading: false,
-        async create() {
-            const cek = templateDaftarInformasi.safeParse(daftarInformasi.create.form);
-            if (!cek.success) {
-                const err = `[${cek.error.issues
-                    .map((v) => `${v.path.join(".")}`)
-                    .join("\n")}] required`;
-                return toast.error(err);
-            }
-            try {
-                daftarInformasi.create.loading = true;
-                const res = await ApiFetch.api.ppid.daftarinformasipublik["create"].post(daftarInformasi.create.form);
-                if (res.status === 200) {
-                    daftarInformasi.findMany.load();
-                    return toast.success("success create");
-                }
-                return toast.error("failed create");
-            } catch (error) {
-                console.log((error as Error).message);
-            } finally {
-                daftarInformasi.create.loading = false;
-            }
-        },
-    },
-    findMany: {
-        data: null as
-        | Prisma.DaftarInformasiPublikGetPayload<{ omit: { isActive: true } }>[]
-        | null,
-        async load() {
-            const res = await ApiFetch.api.ppid.daftarinformasipublik["find-many"].get();
-            if (res.status === 200) {
-                daftarInformasi.findMany.data = res.data?.data ?? [];
-            }
+const daftarInformasiPublik = proxy({
+  create: {
+    form: {} as DaftarInformasi,
+    loading: false,
+    async create() {
+      const cek = templateDaftarInformasi.safeParse(
+        daftarInformasiPublik.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        daftarInformasiPublik.create.loading = true;
+        const res = await ApiFetch.api.ppid.daftarinformasipublik[
+          "create"
+        ].post(daftarInformasiPublik.create.form);
+        if (res.status === 200) {
+          daftarInformasiPublik.findMany.load();
+          return toast.success("success create");
         }
-    }
-    });
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        daftarInformasiPublik.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.DaftarInformasiPublikGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.ppid.daftarinformasipublik[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        daftarInformasiPublik.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.DaftarInformasiPublikGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/ppid/daftarinformasipublik/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          daftarInformasiPublik.findUnique.data = data.data ?? null;
+        } else {
+          console.error(
+            "Failed to fetch daftar informasi publik:",
+            res.statusText
+          );
+          daftarInformasiPublik.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching daftar informasi publik:", error);
+        daftarInformasiPublik.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
 
-    const stateDaftarInformasiPublik = proxy({
-        daftarInformasi
-    })
+      try {
+        daftarInformasiPublik.delete.loading = true;
 
-    export default stateDaftarInformasiPublik;
+        const response = await fetch(
+          `/api/ppid/daftarinformasipublik/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "Daftar Informasi Publik berhasil dihapus"
+          );
+          await daftarInformasiPublik.findMany.load(); // refresh list
+        } else {
+          toast.error(
+            result?.message || "Gagal menghapus daftar informasi publik"
+          );
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus daftar informasi publik");
+      } finally {
+        daftarInformasiPublik.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/ppid/daftarinformasipublik/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            jenisInformasi: data.jenisInformasi,
+            deskripsi: data.deskripsi,
+            tanggal: data.tanggal,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal mengambil data");
+        }
+      } catch (error) {
+        console.error("Error loading daftar informasi publik:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = templateDaftarInformasi.safeParse(
+        daftarInformasiPublik.edit.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        daftarInformasiPublik.edit.loading = true;
+
+        const response = await fetch(
+          `/api/ppid/daftarinformasipublik/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              jenisInformasi: this.form.jenisInformasi,
+              deskripsi: this.form.deskripsi,
+              tanggal: this.form.tanggal,
+            }),
+          }
+        );
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Berhasil update daftar informasi publik");
+          await daftarInformasiPublik.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(
+            result.message || "Gagal update daftar informasi publik"
+          );
+        }
+      } catch (error) {
+        console.error("Error updating daftar informasi publik:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update daftar informasi publik"
+        );
+        return false;
+      } finally {
+        daftarInformasiPublik.edit.loading = false;
+      }
+    },
+
+    reset() {
+      daftarInformasiPublik.edit.id = "";
+      daftarInformasiPublik.edit.form = { ...defaultForm };
+    },
+  },
+});
+
+export default daftarInformasiPublik;

src/app/admin/(dashboard)/desa/berita/page.tsx

@@ -4,9 +4,7 @@ import { Box, Button, Grid, GridCol, Image, Paper, Skeleton, Stack, Table, Table
 import { useShallowEffect } from '@mantine/hooks';
 import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
-import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
 import stateDashboardBerita from '../../_state/desa/berita';
 
 
@@ -34,8 +32,6 @@ function Page() {
 
 function BeritaList() {
   const beritaState = useProxy(stateDashboardBerita)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
 
   useShallowEffect(() => {
     beritaState.berita.findMany.load()
@@ -43,14 +39,6 @@ function BeritaList() {
 
   const router = useRouter()
 
-  const handleHapus = () => {
-    if (selectedId) {
-      beritaState.berita.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-    }
-  }
-
   if (!beritaState.berita.findMany.data) {
     return (
       <Stack py={10}>
@@ -109,13 +97,6 @@ function BeritaList() {
         </Stack>
       </Paper>
 
-      {/* Modal Konfirmasi Hapus */}
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus berita ini?'
-      />
     </Box>
   )
 }

src/app/admin/(dashboard)/ppid/daftar-informasi-publik-desa-darmasaba/[id]/edit/page.tsx

@@ -0,0 +1,113 @@
+'use client'
+/* eslint-disable react-hooks/exhaustive-deps */
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import daftarInformasiPublik from '@/app/admin/(dashboard)/_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+function EditDaftarInformasiPublik() {
+  const daftarInformasi = useProxy(daftarInformasiPublik)
+  const router = useRouter()
+  const params = useParams()
+
+  const [formData, setFormData] = useState({
+    jenisInformasi: daftarInformasi.edit.form.jenisInformasi || '',
+    deskripsi: daftarInformasi.edit.form.deskripsi || '',
+    tanggal: daftarInformasi.edit.form.tanggal || '',
+  })
+
+  useEffect(() => {
+    const loadDaftarInformasi = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await daftarInformasi.edit.load(id);
+        if (data) {
+          setFormData({
+            jenisInformasi: data.jenisInformasi || '',
+            deskripsi: data.deskripsi || '',
+            tanggal: data.tanggal || '',
+          });
+        }
+      } catch (error) {
+        console.error("Error loading daftar informasi:", error);
+        toast.error("Gagal memuat data daftar informasi");
+      }
+    }
+
+    loadDaftarInformasi();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      daftarInformasi.edit.form = {
+        ...daftarInformasi.edit.form,
+        jenisInformasi: formData.jenisInformasi,
+        deskripsi: formData.deskripsi,
+        tanggal: formData.tanggal,
+      }
+      await daftarInformasi.edit.update()
+      toast.success("Berita berhasil diperbarui!");
+      router.push("/admin/ppid/daftar-informasi-publik-desa-darmasaba");
+    } catch (error) {
+      console.error("Error updating berita:", error);
+      toast.error("Terjadi kesalahan saat memperbarui berita");
+    }
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={30} />
+        </Button>
+      </Box>
+      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit Daftar Informasi Publik Desa Darmasaba</Title>
+          <TextInput
+            value={formData.jenisInformasi}
+            label="Jenis Informasi"
+            placeholder="masukkan jenis informasi"
+            onChange={(val) => {
+              setFormData({
+                ...formData,
+                jenisInformasi: val.target.value
+              })
+            }}
+          />
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(htmlContent) => {
+                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
+                daftarInformasi.edit.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
+          <TextInput
+            value={formData.tanggal}
+            label="Tanggal Publikasi"
+            placeholder="masukkan tanggal publikasi"
+            onChange={(val) => {
+              setFormData({
+                ...formData,
+                tanggal: val.target.value
+              })
+            }}
+          />
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Edit Berita</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditDaftarInformasiPublik;

src/app/admin/(dashboard)/ppid/daftar-informasi-publik-desa-darmasaba/[id]/page.tsx

@@ -0,0 +1,107 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import daftarInformasiPublik from '../../../_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
+import { useShallowEffect } from '@mantine/hooks';
+
+function DetailDaftarInformasiPublik() {
+  const [modalHapus, setModalHapus] = useState(false)
+  const stateDaftarInformasi = useProxy(daftarInformasiPublik)
+  const router = useRouter()
+  const params = useParams()
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  useShallowEffect(() => {
+    stateDaftarInformasi.findUnique.load(params?.id as string)
+  }, [params?.id])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateDaftarInformasi.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/ppid/daftar-informasi-publik-desa-darmasaba")
+    }
+  }
+
+  if (!stateDaftarInformasi.findUnique.data) {
+    return (
+      <Stack>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Berita</Text>
+          {stateDaftarInformasi.findUnique.data ? (
+            <Paper key={stateDaftarInformasi.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Jenis Informasi</Text>
+                  <Text fz={"lg"}>{stateDaftarInformasi.findUnique.data?.jenisInformasi}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Tanggal</Text>
+                  <Text fz={"lg"}>{stateDaftarInformasi.findUnique.data?.tanggal}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: stateDaftarInformasi.findUnique.data?.deskripsi }} />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (stateDaftarInformasi.findUnique.data) {
+                        setSelectedId(stateDaftarInformasi.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={stateDaftarInformasi.delete.loading || !stateDaftarInformasi.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (stateDaftarInformasi.findUnique.data) {
+                        router.push(`/admin/ppid/daftar-informasi-publik-desa-darmasaba/${stateDaftarInformasi.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!stateDaftarInformasi.findUnique.data}
+                    color={"green"}
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus berita ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailDaftarInformasiPublik;

src/app/admin/(dashboard)/ppid/daftar-informasi-publik-desa-darmasaba/create/page.tsx

@@ -0,0 +1,72 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import CreateEditor from '../../../_com/createEditor';
+import daftarInformasiPublik from '../../../_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
+
+export default function CreateBerita() {
+  const daftarInformasi = useProxy(daftarInformasiPublik)
+  const router = useRouter()
+
+  const resetForm = () => {
+    // Reset state di valtio
+    daftarInformasi.create.form = {
+      jenisInformasi: "",
+      deskripsi: "",
+      tanggal: "",
+    };
+
+    // Reset state lokal
+  };
+
+  const handleSubmit = async () => {
+    // Submit data berita
+    await daftarInformasi.create.create();
+
+    // Reset form setelah submit
+    resetForm();
+    router.push("/admin/ppid/daftar-informasi-publik-desa-darmasaba")
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Create Daftar Informasi Publik Desa Darmasaba</Title>
+          <TextInput
+            label="Jenis Informasi"
+            placeholder="masukkan jenis informasi"
+            onChange={(val) => {
+              daftarInformasi.create.form.jenisInformasi = val.target.value
+            }}
+          />
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <CreateEditor
+              value={daftarInformasi.create.form.deskripsi}
+              onChange={(htmlContent) => {
+                daftarInformasi.create.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
+          <TextInput
+            label="Tanggal Publikasi"
+            placeholder="masukkan tanggal publikasi"
+            onChange={(val) => {
+              daftarInformasi.create.form.tanggal = val.target.value
+            }}
+          />
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan Berita</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}

src/app/admin/(dashboard)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx

@@ -1,112 +1,97 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, TextInput, Title } from '@mantine/core';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, TextInput, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
+import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
-import stateDaftarInformasiPublik from '../../_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
-import { PPIDTextEditor } from '../_com/PPIDTextEditor';
+import daftarInformasiPublik from '../../_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
 
 function Page() {
-  const daftarInformasi = useProxy(stateDaftarInformasiPublik.daftarInformasi)
-  const submit = () => {
-    if (daftarInformasi.create.form.jenisInformasi &&
-      daftarInformasi.create.form.deskripsi &&
-      daftarInformasi.create.form.tanggal) {
-      daftarInformasi.create.create()
-    }
-  }
   return (
     <Box>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Title fw={"bold"} order={3}>Daftar Informasi Publik Desa Darmasaba</Title>
-              <TextInput
-                label="Jenis Informasi"
-                placeholder="masukkan jenis informasi"
-                onChange={(val) => {
-                  daftarInformasi.create.form.jenisInformasi = val.target.value
-                }}
-              />
-              <PPIDTextEditor
-                showSubmit={false}
-                onChange={(val) => {
-                  daftarInformasi.create.form.deskripsi = val
-                }}
-              />
-              <TextInput
-                label="Tanggal Publikasi"
-                placeholder="masukkan tanggal publikasi"
-                onChange={(val) => {
-                  daftarInformasi.create.form.tanggal = val.target.value
-                }}
-              />
-              <Group>
-                <Button
-                  bg={colors['blue-button']}
-                  onClick={submit}
-                >Submit</Button>
-              </Group>
-            </Stack>
+      <Grid>
+        <GridCol span={{ base: 12, md: 9 }}>
+          <Title order={3}>Daftar Informasi Publik Desa Darmasaba</Title>
+        </GridCol>
+        <GridCol span={{ base: 12, md: 3 }}>
+          <Paper radius={"lg"} bg={colors['white-1']}>
+            <TextInput
+              radius={"lg"}
+              placeholder='pencarian'
+              leftSection={<IconSearch size={20} />}
+            />
           </Paper>
-        </Box>
-        <Box>
-          <ListDaftarInformasi />
-        </Box>
-      </SimpleGrid>
+        </GridCol>
+      </Grid>
+      <ListDaftarInformasi />
     </Box>
   );
 }
 
 function ListDaftarInformasi() {
-  const listData = useProxy(stateDaftarInformasiPublik.daftarInformasi)
+  const listData = useProxy(daftarInformasiPublik)
+
   useShallowEffect(() => {
     listData.findMany.load()
   }, [])
-  if (!listData.findMany.data) return <Stack>
-    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
-  </Stack>
+
+  const router = useRouter()
+
+  if (!listData.findMany.data) {
+    return (
+      <Stack>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
   return (
-    <Box>
+    <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title fw={"bold"} order={3}>List Daftar Informasi Publik Desa Darmasaba</Title>
-          <Table
-            suppressHydrationWarning
-            striped
-            highlightOnHover
-            withTableBorder
-            withColumnBorders
-            bg={colors['white-1']}
-          >
-            <TableThead>
-              <TableTr>
-                <TableTh>
-                  No
-                </TableTh>
-                <TableTh>
-                  Jenis Informasi
-                </TableTh>
-                <TableTh>
-                  Deskripsi
-                </TableTh>
-                <TableTh>
-                  Tanggal Publikasi
-                </TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              {listData.findMany.data?.map((item) => (
-                <TableTr key={item.id}>
-                  <TableTd>{item.nomor}</TableTd>
-                  <TableTd>{item.jenisInformasi}</TableTd>
-                  <TableTd dangerouslySetInnerHTML={{ __html: item.deskripsi }}></TableTd>
-                  <TableTd>{item.tanggal}</TableTd>
+        <Stack>
+          <Grid>
+            <GridCol span={{ base: 12, md: 11 }}>
+              <Text fz={"xl"} fw={"bold"}>List Daftar Informasi Publik Desa Darmasaba</Text>
+            </GridCol>
+            <GridCol span={{ base: 12, md: 1 }}>
+              <Button onClick={() => router.push("/admin/ppid/daftar-informasi-publik-desa-darmasaba/create")} bg={colors['blue-button']}>
+                <IconCircleDashedPlus size={25} />
+              </Button>
+            </GridCol>
+          </Grid>
+          <Box style={{ overflowX: "auto" }}>
+            <Table
+              striped
+              withTableBorder
+              withRowBorders
+              bg={colors['white-1']}
+              style={{ minWidth: '700px' }}
+            >
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Jenis Informasi</TableTh>
+                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Detail</TableTh>
                 </TableTr>
-              ))}
-            </TableTbody>
-          </Table>
+              </TableThead>
+              <TableTbody>
+                {listData.findMany.data?.map((item, index) => (
+                  <TableTr key={item.id}>
+                    <TableTd>{index + 1}</TableTd>
+                    <TableTd>{item.jenisInformasi}</TableTd>
+                    <TableTd dangerouslySetInnerHTML={{ __html: item.deskripsi }}></TableTd>
+                    <TableTd>
+                      <Button bg={"green"} onClick={() => router.push(`/admin/ppid/daftar-informasi-publik-desa-darmasaba/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
         </Stack>
       </Paper>
     </Box>

src/app/admin/(dashboard)/ppid/dasar-hukum/create/create.tsx

@@ -1,44 +0,0 @@
-'use client'
-import { Box, Stack, Text } from '@mantine/core';
-import dynamic from 'next/dynamic';
-
-const PPIDTextEditor = dynamic(() => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor), {
-  ssr: false,
-});
-
-function CreateDasarHukum({
-  valueJudul,
-  valueContent,
-  onJudulChange,
-  onContentChange,
-  error
-} : {
-  valueJudul: string;
-  valueContent: string;
-  onJudulChange: (val: string) => void;
-  onContentChange: (val: string) => void;
-  error?: string;
-}) {
-  
-  return (
-    <Box>
-     <Stack gap={"xs"}>
-     <Text fw={"bold"}>Judul</Text>
-      <PPIDTextEditor
-        showSubmit={false}
-        onChange={onJudulChange}
-        initialContent={valueJudul}
-      />
-      <Text fw={"bold"}>Content</Text>
-      <PPIDTextEditor
-        showSubmit={false}
-        onChange={onContentChange}
-        initialContent={valueContent}
-      />
-      {error && <Text c="red" size="sm">{error}</Text>}
-     </Stack>
-    </Box>
-  );
-}
-
-export default CreateDasarHukum;

src/app/admin/(dashboard)/ppid/dasar-hukum/edit/page.tsx

@@ -0,0 +1,86 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import dynamic from 'next/dynamic';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import stateDasarHukumPPID from '../../../_state/ppid/dasar_hukum/dasarHukum';
+import { useRouter } from 'next/navigation';
+import { IconArrowBack } from '@tabler/icons-react';
+
+const PPIDTextEditor = dynamic(() => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor), {
+  ssr: false,
+});
+
+function EditDasarHukum() {
+  const router = useRouter()
+  const dasarHukumState = useProxy(stateDasarHukumPPID)
+  const [judul, setJudul] = useState('');
+  const [content, setContent] = useState('');
+
+  useShallowEffect(() => {
+    if (!dasarHukumState.findById.data) {
+      dasarHukumState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+    }
+  }, []);
+
+  useEffect(() => {
+    if (dasarHukumState.findById.data) {
+      setJudul(dasarHukumState.findById.data.judul ?? '')
+      setContent(dasarHukumState.findById.data.content ?? '')
+    }
+  }, [dasarHukumState.findById.data])
+
+  const submit = () => {
+    if (dasarHukumState.findById.data) {
+      dasarHukumState.findById.data.judul = judul;
+      dasarHukumState.findById.data.content = content;
+      dasarHukumState.update.save(dasarHukumState.findById.data)
+    }
+  }
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Box>
+          <Button
+            variant={'subtle'}
+            onClick={() => router.back()}
+          >
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
+            <Stack gap={'xs'}>
+              <Title order={3}>Edit Dasar Hukum PPID</Title>
+              <Text fw={"bold"}>Judul</Text>
+              <PPIDTextEditor
+                showSubmit={false}
+                onChange={setJudul}
+                initialContent={judul}
+              />
+              <Text fw={"bold"}>Content</Text>
+              <PPIDTextEditor
+                showSubmit={false}
+                onChange={setContent}
+                initialContent={content}
+              />
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={submit}
+                  loading={dasarHukumState.update.loading}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditDasarHukum;

src/app/admin/(dashboard)/ppid/dasar-hukum/listData/page.tsx

@@ -1,40 +0,0 @@
-'use client'
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import stateDasarHukumPPID from '../../../_state/ppid/dasar_hukum/dasarHukum';
-import { useShallowEffect } from '@mantine/hooks';
-import { Box, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
-import colors from '@/con/colors';
-
-function ListDataDasarHukum() {
-  const dataList = useProxy(stateDasarHukumPPID)
-  useShallowEffect(() => {
-    dataList.findById.load("")
-  }, [])
-
-  if(!dataList.findById.data) return <Stack>
-    {Array.from({length: 10}).map((v, k) => <Skeleton key={k} h={40} />)}
-  </Stack>
-
-const dataArray = Array.isArray(dataList.findById.data)
-  ? dataList.findById.data
-  : [dataList.findById.data];
-
-  return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-    <Stack gap={"xs"}>
-    <Title order={3}>List Dasar Hukum PPID</Title>
-    {dataArray.map((item) => (
-      <Box key={item.id}>
-        <Text fw={"bold"}>Judul</Text>
-        <Text dangerouslySetInnerHTML={{ __html: item.judul }}></Text>
-        <Text fw={"bold"}>Content</Text>
-        <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
-      </Box>
-    ))}
-    </Stack>
-    </Paper>
-  );
-}
-
-export default ListDataDasarHukum;

src/app/admin/(dashboard)/ppid/dasar-hukum/page.tsx

@@ -1,61 +1,55 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
-import CreateDasarHukum from './create/create';
-import ListDataDasarHukum from './listData/page';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import stateDasarHukumPPID from '../../_state/ppid/dasar_hukum/dasarHukum';
-import { useEffect, useState } from 'react';
 
 function Page() {
-  const dasarHukumState = useProxy(stateDasarHukumPPID)
-  const [judul, setJudul] = useState('');
-  const [content, setContent] = useState('');
-
+  const router = useRouter()
+  const listDasarHukum = useProxy(stateDasarHukumPPID)
   useShallowEffect(() => {
-    if (!dasarHukumState.findById.data) {
-      dasarHukumState.findById.initialize(); // biar masuk ke `findFirst` route kamu
-    }
-  }, []);
+    listDasarHukum.findById.load('1')
+  }, [])
 
-  useEffect(() => {
-    if (dasarHukumState.findById.data) {
-      setJudul(dasarHukumState.findById.data.judul ?? '')
-      setContent(dasarHukumState.findById.data.content ?? '')
-    }
-  }, [dasarHukumState.findById.data])
-
-  const submit = () => {
-    if (dasarHukumState.findById.data) {
-      dasarHukumState.findById.data.judul = judul;
-      dasarHukumState.findById.data.content = content;
-      dasarHukumState.update.save(dasarHukumState.findById.data)
-    }
+  if (!listDasarHukum.findById.data) {
+    return (
+      <Stack>
+        <Skeleton radius={10} h={800} />
+      </Stack>
+    )
   }
-
   return (
-    <Stack gap={"xs"}>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10}>
-            <Title order={3}>Dasar Hukum PPID</Title>
-            <CreateDasarHukum onJudulChange={setJudul} onContentChange={setContent} valueJudul={judul} valueContent={content} />
-            <Group>
-              <Button
-                mt={10}
-                bg={colors['blue-button']}
-                onClick={submit}
-                loading={dasarHukumState.update.loading}
-              >
-                Submit
-              </Button>
-            </Group>
-          </Paper>
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={"22"}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={2}>Preview Dasar Hukum PPID</Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/ppid/dasar-hukum/edit')}>
+              <IconEdit size={16} />
+            </Button>
+          </GridCol>
+        </Grid>
+        <Box px={{ base: "md", md: 100 }}>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <Box px={{ base: 20, md: 50 }} pb={30}>
+                <Text ta={"center"} fz={{ base: "h3", md: "h2" }} fw={"bold"}>
+                  {listDasarHukum.findById.data.judul}
+                </Text>
+              </Box>
+              <Box px={{ base: 20, md: 50 }}>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listDasarHukum.findById.data.content }} />
+              </Box>
+            </Paper>
+          </Stack>
         </Box>
-        <ListDataDasarHukum />
-      </SimpleGrid>
-    </Stack>
+      </Stack>
+    </Paper>
   )
 }
 

src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/page.tsx

@@ -10,9 +10,10 @@ function Page() {
   useShallowEffect(() => {
     permohonanInformasiPublikState.statepermohonanInformasiPublik.findMany.load()
   }, [])
-  if (!permohonanInformasiPublikState.statepermohonanInformasiPublik.findMany.data) return <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
-    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
-  </Stack>
+  if (!permohonanInformasiPublikState.statepermohonanInformasiPublik.findMany.data)
+    return <Stack pos={"relative"} bg={colors.Bg}>
+      <Skeleton radius={5} h={200} />
+    </Stack>
 
   return (
     <Box py={5}>

src/app/admin/(dashboard)/ppid/permohonan-keberatan-informasi-publik/page.tsx

@@ -11,9 +11,11 @@ function Page() {
     listState.findMany.load()
   }, [])
 
-  if (!listState.findMany.data) return <Stack>
-    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
-  </Stack>
+  if (!listState.findMany.data)
+    return <Stack pos={"relative"} bg={colors.Bg}>
+      <Skeleton radius={5} h={200} />
+    </Stack>
+
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>

src/app/admin/(dashboard)/ppid/visi-misi-ppid/edit/backup.txt

@@ -0,0 +1,115 @@
+'use client'
+import colors from '@/con/colors';
+import {
+  Box, Button, Group, Paper, SimpleGrid, Skeleton, Stack, Text, Title
+} from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useProxy } from 'valtio/utils';
+import { useEffect, useState } from 'react';
+import stateVisiMisiPPID from '../../../_state/ppid/visi_misi_ppid/visimisiPPID';
+import MisiPPID from '../misiPPID/misi-PPID';
+import VisiPPID from '../visiPPID/visi-PPID';
+
+
+
+
+function Page() {
+  return (
+    <Box>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
+        <VisiMisiPPIDCreate />
+        <VisiMisiPPIDList />
+      </SimpleGrid>
+    </Box>
+  );
+}
+
+function VisiMisiPPIDCreate() {
+  const visiMisi = useProxy(stateVisiMisiPPID);
+  const [draftVisi, setDraftVisi] = useState('');
+  const [draftMisi, setDraftMisi] = useState('');
+
+  useShallowEffect(() => {
+    if (!visiMisi.findById.data) {
+      visiMisi.findById.initialize();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (visiMisi.findById.data) {
+      setDraftVisi(visiMisi.findById.data.visi ?? '');
+      setDraftMisi(visiMisi.findById.data.misi ?? '');
+    }
+  }, [visiMisi.findById.data]);
+
+  const submit = () => {
+    if (visiMisi.findById.data) {
+      // update nilai di state global hanya saat submit
+      visiMisi.findById.data.visi = draftVisi;
+      visiMisi.findById.data.misi = draftMisi;
+      visiMisi.update.save(visiMisi.findById.data);
+    }
+  };
+
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={'xs'}>
+        <Title order={3}>Visi Misi PPID</Title>
+        <VisiPPID value={draftVisi} onChange={setDraftVisi} />
+        <MisiPPID value={draftMisi} onChange={setDraftMisi} />
+        <Group>
+          <Button
+            bg={colors['blue-button']}
+            onClick={submit}
+            loading={visiMisi.update.loading}
+          >
+            Submit
+          </Button>
+        </Group>
+      </Stack>
+    </Paper>
+  );
+}
+
+function VisiMisiPPIDList() {
+  const listVisiMisi = useProxy(stateVisiMisiPPID);
+  useShallowEffect(() => {
+    listVisiMisi.findById.load('1');
+  }, []);
+
+  if (!listVisiMisi.findById.data) {
+    return (
+      <Stack>
+        {Array.from({ length: 10 }).map((_, k) => (
+          <Skeleton key={k} h={40} />
+        ))}
+      </Stack>
+    );
+  }
+
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={'xs'}>
+        <Title order={3}>List Visi Misi PPID</Title>
+        <Box>
+          <Text fw={'bold'}>Visi PPID</Text>
+          <Text
+            dangerouslySetInnerHTML={{
+              __html: listVisiMisi.findById.data.visi,
+            }}
+          ></Text>
+        </Box>
+        <Box>
+          <Text fw={'bold'}>Misi PPID</Text>
+          <Text
+            dangerouslySetInnerHTML={{
+              __html: listVisiMisi.findById.data.misi,
+            }}
+          ></Text>
+        </Box>
+      </Stack>
+    </Paper>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ppid/visi-misi-ppid/edit/page.tsx

@@ -0,0 +1,81 @@
+'use client'
+import colors from '@/con/colors';
+import {
+  Box,
+  Button, Group, Paper,
+  Stack,
+  Title
+} from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import stateVisiMisiPPID from '../../../_state/ppid/visi_misi_ppid/visimisiPPID';
+import MisiPPID from '../misiPPID/misi-PPID';
+import VisiPPID from '../visiPPID/visi-PPID';
+
+
+function VisiMisiPPIDEdit() {
+  const router = useRouter()
+  const visiMisi = useProxy(stateVisiMisiPPID);
+  const [draftVisi, setDraftVisi] = useState('');
+  const [draftMisi, setDraftMisi] = useState('');
+
+  useShallowEffect(() => {
+    if (!visiMisi.findById.data) {
+      visiMisi.findById.initialize();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (visiMisi.findById.data) {
+      setDraftVisi(visiMisi.findById.data.visi ?? '');
+      setDraftMisi(visiMisi.findById.data.misi ?? '');
+    }
+  }, [visiMisi.findById.data]);
+
+  const submit = () => {
+    if (visiMisi.findById.data) {
+      // update nilai di state global hanya saat submit
+      visiMisi.findById.data.visi = draftVisi;
+      visiMisi.findById.data.misi = draftMisi;
+      visiMisi.update.save(visiMisi.findById.data);
+    }
+  };
+
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Box>
+          <Button
+            variant={'subtle'}
+            onClick={() => router.back()}
+          >
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
+            <Stack gap={'xs'}>
+              <Title order={3}>Edit Visi Misi PPID</Title>
+              <VisiPPID value={draftVisi} onChange={setDraftVisi} />
+              <MisiPPID value={draftMisi} onChange={setDraftMisi} />
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={submit}
+                  loading={visiMisi.update.loading}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default VisiMisiPPIDEdit;

src/app/admin/(dashboard)/ppid/visi-misi-ppid/page.tsx

@@ -1,76 +1,25 @@
 'use client'
 import colors from '@/con/colors';
 import {
-  Box, Button, Group, Paper, SimpleGrid, Skeleton, Stack, Text, Title
+  Box,
+  Button,
+  Center,
+  Grid,
+  GridCol,
+  Image,
+  Paper,
+  Skeleton, Stack, Text,
+  Title
 } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useProxy } from 'valtio/utils';
-import { useEffect, useState } from 'react';
 import stateVisiMisiPPID from '../../_state/ppid/visi_misi_ppid/visimisiPPID';
-import VisiPPID from './visiPPID/visi-PPID';
-import MisiPPID from './misiPPID/misi-PPID';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
 
 
-
-function Page() {
-  return (
-    <Box>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>
-        <VisiMisiPPIDCreate />
-        <VisiMisiPPIDList />
-      </SimpleGrid>
-    </Box>
-  );
-}
-
-function VisiMisiPPIDCreate() {
-  const visiMisi = useProxy(stateVisiMisiPPID);
-  const [draftVisi, setDraftVisi] = useState('');
-  const [draftMisi, setDraftMisi] = useState('');
-
-  useShallowEffect(() => {
-    if (!visiMisi.findById.data) {
-      visiMisi.findById.initialize();
-    }
-  }, []);
-
-  useEffect(() => {
-    if (visiMisi.findById.data) {
-      setDraftVisi(visiMisi.findById.data.visi ?? '');
-      setDraftMisi(visiMisi.findById.data.misi ?? '');
-    }
-  }, [visiMisi.findById.data]);
-
-  const submit = () => {
-    if (visiMisi.findById.data) {
-      // update nilai di state global hanya saat submit
-      visiMisi.findById.data.visi = draftVisi;
-      visiMisi.findById.data.misi = draftMisi;
-      visiMisi.update.save(visiMisi.findById.data);
-    }
-  };
-
-  return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={'xs'}>
-        <Title order={3}>Visi Misi PPID</Title>
-        <VisiPPID value={draftVisi} onChange={setDraftVisi} />
-        <MisiPPID value={draftMisi} onChange={setDraftMisi} />
-        <Group>
-          <Button
-            bg={colors['blue-button']}
-            onClick={submit}
-            loading={visiMisi.update.loading}
-          >
-            Submit
-          </Button>
-        </Group>
-      </Stack>
-    </Paper>
-  );
-}
-
 function VisiMisiPPIDList() {
+  const router = useRouter()
   const listVisiMisi = useProxy(stateVisiMisiPPID);
   useShallowEffect(() => {
     listVisiMisi.findById.load('1');
@@ -79,36 +28,56 @@ function VisiMisiPPIDList() {
   if (!listVisiMisi.findById.data) {
     return (
       <Stack>
-        {Array.from({ length: 10 }).map((_, k) => (
-          <Skeleton key={k} h={40} />
-        ))}
+        <Skeleton radius={10} h={800} />
       </Stack>
     );
   }
 
   return (
     <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={'xs'}>
-        <Title order={3}>List Visi Misi PPID</Title>
-        <Box>
-          <Text fw={'bold'}>Visi PPID</Text>
-          <Text
-            dangerouslySetInnerHTML={{
-              __html: listVisiMisi.findById.data.visi,
-            }}
-          ></Text>
-        </Box>
-        <Box>
-          <Text fw={'bold'}>Misi PPID</Text>
-          <Text
-            dangerouslySetInnerHTML={{
-              __html: listVisiMisi.findById.data.misi,
-            }}
-          ></Text>
+      <Stack pos={"relative"} gap={"22"}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={2}>Preview Visi Misi PPID</Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/ppid/visi-misi-ppid/edit')}>
+              <IconEdit size={16} />
+            </Button>
+          </GridCol>
+        </Grid>
+        <Box px={{ base: "md", md: 100 }}>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <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"} dangerouslySetInnerHTML={{ __html: listVisiMisi.findById.data.visi }} />
+              </Box>
+              <Box px={{ base: 20, md: 50 }}>
+                <Text ta={"center"} fz={{ base: "h3", md: "h2" }} fw={"bold"}>
+                  MISI PPID
+                </Text>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listVisiMisi.findById.data.misi }} />
+              </Box>
+            </Paper>
+          </Stack>
         </Box>
       </Stack>
     </Paper>
   );
 }
 
-export default Page;
+export default VisiMisiPPIDList;

src/app/api/[[...slugs]]/_lib/ppid/daftar_informasi_publik/create.ts

@@ -11,12 +11,8 @@ type FormCreate = Prisma.DaftarInformasiPublikGetPayload<{
 }>
 export default async function daftarInformasiPublikCreate(context: Context) {
     const body = context.body as FormCreate;
-    const jumlahData = await prisma.daftarInformasiPublik.count({
-        where: { isActive: true }, // hitung data aktif aja
-      })
     await prisma.daftarInformasiPublik.create({
-        data: {
-            nomor: jumlahData + 1,
+        data: { 
             jenisInformasi: body.jenisInformasi,
             deskripsi: body.deskripsi,
             tanggal: body.tanggal,

src/app/api/[[...slugs]]/_lib/ppid/daftar_informasi_publik/del.ts

@@ -0,0 +1,36 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+const daftarInformasiPublikDelete = async (context: Context) => {
+  const id = context.params?.id as string;
+
+  if (!id) {
+    return {
+      status: 400,
+      body: "ID tidak diberikan",
+    };
+  }
+
+  const daftarInformasi = await prisma.daftarInformasiPublik.findUnique({
+    where: { id },
+  });
+
+  if (!daftarInformasi) {
+    return {
+      status: 400,
+      body: "Daftar Informasi Publik tidak ditemukan",
+    };
+  }
+
+  await prisma.daftarInformasiPublik.delete({
+    where: { id },
+  });
+
+  return {
+    success: true,
+    status: 200,
+    body: "Daftar Informasi Publik berhasil dihapus",
+  };
+};
+
+export default daftarInformasiPublikDelete;

src/app/api/[[...slugs]]/_lib/ppid/daftar_informasi_publik/edit.ts

@@ -0,0 +1,47 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function daftarInformasiPublikEdit(context: Context) {
+  const id = context.params?.id;
+
+  if (!id) {
+    return {
+      success: false,
+      message: "ID tidak ditemukan",
+    };
+  }
+
+  const { jenisInformasi, deskripsi, tanggal } = context.body as {
+    jenisInformasi: string;
+    deskripsi: string;
+    tanggal: string;
+  };
+
+  const existing = await prisma.daftarInformasiPublik.findUnique({
+    where: {
+      id: id,
+    },
+  });
+
+  if (!existing) {
+    return {
+      success: false,
+      message: "Data tidak ditemukan",
+    };
+  }
+
+  const updated = await prisma.daftarInformasiPublik.update({
+    where: { id },
+    data: {
+      jenisInformasi,
+      deskripsi,
+      tanggal,
+    },
+  });
+
+  return {
+    success: true,
+    message: "Data berhasil diupdate",
+    data: updated,
+  };
+}

src/app/api/[[...slugs]]/_lib/ppid/daftar_informasi_publik/find-by-id.ts

@@ -0,0 +1,46 @@
+import prisma from "@/lib/prisma";
+
+export default async function handler(request: Request) {
+  const url = new URL(request.url);
+  const pathSegments = url.pathname.split('/');
+  const id = pathSegments[pathSegments.length - 1];
+
+  if (!id) {
+    return Response.json({
+      success: false,
+      message: "ID tidak boleh kosong",
+    }, { status: 400 });
+  }
+
+  try {
+    if (typeof id !== 'string') {
+      return Response.json({
+        success: false,
+        message: "ID tidak valid",
+      }, { status: 400 });
+    }
+
+    const data = await prisma.daftarInformasiPublik.findUnique({
+      where: { id },
+    });
+
+    if (!data) {
+      return Response.json({
+        success: false,
+        message: "Data tidak ditemukan",
+      }, { status: 404 });
+    }
+
+    return Response.json({
+      success: true,
+      message: "Berhasil mengambil data berdasarkan ID",
+      data,
+    }, { status: 200 });
+  } catch (e) {
+    console.error("Find by ID error:", e);
+    return Response.json({
+      success: false,
+      message: "Gagal mengambil data: " + (e instanceof Error ? e.message : 'Unknown error'),
+    }, { status: 500 });
+  }
+}

src/app/api/[[...slugs]]/_lib/ppid/daftar_informasi_publik/index.ts

@@ -1,18 +1,36 @@
 import Elysia, { t } from "elysia";
 import daftarInformasiPublikCreate from "./create";
 import daftarInformasiPublikFindMany from "./find-many";
+import daftarInformasiPublikFindById from "./find-by-id";
+import daftarInformasiPublikEdit from "./edit";
+import daftarInformasiPublikDelete from "./del";
 
 const DaftarInformasiPublik = new Elysia({
-    prefix: "/daftarinformasipublik",
-    tags: ["PPID/Daftar Informasi Publik"]
+  prefix: "/daftarinformasipublik",
+  tags: ["PPID/Daftar Informasi Publik"],
 })
-    .get("/find-many", daftarInformasiPublikFindMany)
-    .post("/create", daftarInformasiPublikCreate, {
-        body: t.Object({
-            jenisInformasi: t.String(),
-            deskripsi: t.String(),
-            tanggal: t.String(),
-        }),
-    })
+  .put("/:id", daftarInformasiPublikEdit, {
+    params: t.Object({
+      id: t.String(),
+    }),
+    body: t.Object({
+      jenisInformasi: t.String(),
+      deskripsi: t.String(),
+      tanggal: t.String(),
+    }),
+  })
+  .delete("/del/:id", daftarInformasiPublikDelete)
+  .get("/:id", async (context) => {
+    const response = await daftarInformasiPublikFindById(new Request(context.request))
+    return response
+  })
+  .get("/find-many", daftarInformasiPublikFindMany)
+  .post("/create", daftarInformasiPublikCreate, {
+    body: t.Object({
+      jenisInformasi: t.String(),
+      deskripsi: t.String(),
+      tanggal: t.String(),
+    }),
+  });
 
-export default DaftarInformasiPublik
+export default DaftarInformasiPublik;

src/app/darmasaba/(pages)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx

@@ -1,5 +1,5 @@
 'use client'
-import stateDaftarInformasiPublik from '@/app/admin/(dashboard)/_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
+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 { useShallowEffect } from '@mantine/hooks';
@@ -8,7 +8,7 @@ import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
 
 function Page() {
-  const listData = useProxy(stateDaftarInformasiPublik.daftarInformasi)
+  const listData = useProxy(daftarInformasiPublik)
   useShallowEffect(() => {
     listData.findMany.load()
   }, [])
@@ -51,9 +51,9 @@ function Page() {
               </TableTr>
             </TableThead>
             <TableTbody bg={colors['white-1']}>
-              {listData.findMany.data?.map((item) => (
+              {listData.findMany.data?.map((item, index) => (
                 <TableTr key={item.id}>
-                  <TableTd ta={'center'}>{item.nomor}</TableTd>
+                  <TableTd ta={'center'}>{index + 1}</TableTd>
                   <TableTd>{item.jenisInformasi}</TableTd>
                   <TableTd dangerouslySetInnerHTML={{ __html: item.deskripsi }}></TableTd>
                   <TableTd>{item.tanggal}</TableTd>