FIX UI Admin Menu PPID

prisma/schema.prisma

@@ -152,7 +152,7 @@ model DaftarInformasiPublik {
   id             String   @id @default(cuid())
   jenisInformasi String
   deskripsi      String
-  tanggal        String
+  tanggal        DateTime @db.Date
   createdAt      DateTime @default(now())
   updatedAt      DateTime @updatedAt
   deletedAt      DateTime @default(now())
@@ -1314,7 +1314,7 @@ model Belanja {
   updatedAt DateTime  @updatedAt
   deletedAt DateTime  @default(now())
   isActive  Boolean   @default(true)
-  ApbDesa ApbDesa[] @relation("ApbDesaBelanja")
+  ApbDesa   ApbDesa[] @relation("ApbDesaBelanja")
 }
 
 model Pembiayaan {
@@ -1325,8 +1325,9 @@ model Pembiayaan {
   updatedAt DateTime  @updatedAt
   deletedAt DateTime  @default(now())
   isActive  Boolean   @default(true)
-  ApbDesa ApbDesa[] @relation("ApbDesaPembiayaan")
+  ApbDesa   ApbDesa[] @relation("ApbDesaPembiayaan")
 }
+
 // ========================================= INOVASI ========================================= //
 // ========================================= DESA DIGITAL / SMART VILLAGE ========================================= //
 model DesaDigital {

src/app/admin/(dashboard)/_com/header.tsx

@@ -19,7 +19,7 @@ const HeaderSearch = ({
   onChange,
 }: HeaderSearchProps) => {
   return (
-    <Grid>
+    <Grid mb={10}>
       <GridCol span={{ base: 12, md: 9 }}>
         <Title order={3}>{title}</Title>
       </GridCol>

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -16,17 +17,9 @@ const defaultForm = {
   tanggal: "",
 };
 
-type DaftarInformasi = Prisma.DaftarInformasiPublikGetPayload<{
-  select: {
-    jenisInformasi: true;
-    deskripsi: true;
-    tanggal: true;
-  };
-}>;
-
 const daftarInformasiPublik = proxy({
   create: {
-    form: {} as DaftarInformasi,
+    form: {...defaultForm},
     loading: false,
     async create() {
       const cek = templateDaftarInformasi.safeParse(
@@ -56,15 +49,38 @@ const daftarInformasiPublik = proxy({
     },
   },
   findMany: {
-    data: null as
+    data: null as any[] | null,
-      | Prisma.DaftarInformasiPublikGetPayload<{ omit: { isActive: true } }>[]
+    page: 1,
-      | null,
+    totalPages: 1,
-    async load() {
+    total: 0,
-      const res = await ApiFetch.api.ppid.daftarinformasipublik[
+    loading: false,
-        "find-many"
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
-      ].get();
+      daftarInformasiPublik.findMany.loading = true;  // Use the full path to access the property
-      if (res.status === 200) {
+      daftarInformasiPublik.findMany.page = page;
-        daftarInformasiPublik.findMany.data = res.data?.data ?? [];
+      try {
+        const res = await ApiFetch.api.ppid.daftarinformasipublik[
+          "find-many"
+        ].get({
+          query: { page, limit },
+        });
+  
+        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;
+        } 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);
+        daftarInformasiPublik.findMany.data = [];
+        daftarInformasiPublik.findMany.total = 0;
+        daftarInformasiPublik.findMany.totalPages = 1;
+      } finally {
+        daftarInformasiPublik.findMany.loading = false;
       }
     },
   },
@@ -186,7 +202,9 @@ const daftarInformasiPublik = proxy({
       }
       try {
         daftarInformasiPublik.edit.loading = true;
-
+        const formattedTanggal = this.form.tanggal
+        ? new Date(this.form.tanggal).toISOString()
+        : undefined;
         const response = await fetch(
           `/api/ppid/daftarinformasipublik/${this.id}`,
           {
@@ -197,7 +215,7 @@ const daftarInformasiPublik = proxy({
             body: JSON.stringify({
               jenisInformasi: this.form.jenisInformasi,
               deskripsi: this.form.deskripsi,
-              tanggal: this.form.tanggal,
+              tanggal: formattedTanggal,
             }),
           }
         );

src/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanJenisKelamin.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -9,71 +10,75 @@ const templateGrafikJenisKelamin = z.object({
   perempuan: z.string().min(1, "Data perempuan harus diisi"),
 }); 
 
-type GrafikJenisKelamin = Prisma.GrafikBerdasarkanJenisKelaminGetPayload<{
+const defaultForm = {
-  select: {
-    id: true;
-    laki: true;
-    perempuan: true;
-  };
-}>;
-
-const defaultForm: Omit<GrafikJenisKelamin, 'id'> & { id?: string } = {
   laki: "",
   perempuan: "",
 };
 
 const grafikBerdasarkanJenisKelamin = proxy({
   create: {
-    form: defaultForm,
+    form: {...defaultForm},
     loading: false,
-    async create() {
+    async create(){
-      const cek = templateGrafikJenisKelamin.safeParse(
+      const cek = templateGrafikJenisKelamin.safeParse(grafikBerdasarkanJenisKelamin.create.form);
-        grafikBerdasarkanJenisKelamin.create.form
-      );
       if (!cek.success) {
-        const err = `[${cek.error.issues
+        const err = cek.error.issues.map((i) => i.message).join("\n");
-          .map((v) => `${v.path.join(".")}`)
+        toast.error(err);
-          .join("\n")}] required`;
+        return;
-        return toast.error(err);
       }
+
       try {
         grafikBerdasarkanJenisKelamin.create.loading = true;
         const res = await ApiFetch.api.ppid.grafikberdasarkanjeniskelamin[
           "create"
         ].post(grafikBerdasarkanJenisKelamin.create.form);
         if (res.status === 200) {
-          const id = res.data?.data?.id;
+          toast.success("Grafik berdasarkan jenis kelamin berhasil ditambahkan");
-          if (id) {
+          await grafikBerdasarkanJenisKelamin.findMany.load();
-            toast.success("Success create");
+        } else {
-            grafikBerdasarkanJenisKelamin.create.form = {
+          toast.error(res.data?.message ?? "Gagal tambah grafik berdasarkan jenis kelamin");
-              laki: "",
-              perempuan: "",
-            };
-            grafikBerdasarkanJenisKelamin.findMany.load();
-            return id;
-          }
         }
-        return toast.error("failed create");
       } catch (error) {
-        console.log((error as Error).message);
+        console.error("Gagal create:", error);
+        toast.error("Terjadi kesalahan saat menambahkan grafik berdasarkan jenis kelamin");
       } finally {
         grafikBerdasarkanJenisKelamin.create.loading = false;
       }
     },
   },
   findMany: {
-    data: null as
+    data: null as any[] | null,
-      | Prisma.GrafikBerdasarkanJenisKelaminGetPayload<{
+    page: 1,
-          omit: { isActive: true };
+    totalPages: 1,
-        }>[]
+    total: 0,
-      | null,
     loading: false,
-    async load() {
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
-      const res = await ApiFetch.api.ppid.grafikberdasarkanjeniskelamin[
+      grafikBerdasarkanJenisKelamin.findMany.loading = true;  // Use the full path to access the property
-        "find-many"
+      grafikBerdasarkanJenisKelamin.findMany.page = page;
-      ].get();
+      try {
-      if (res.status === 200) {
+        const res = await ApiFetch.api.ppid.grafikberdasarkanjeniskelamin[
-        grafikBerdasarkanJenisKelamin.findMany.data = res.data?.data ?? [];
+          "find-many"
+        ].get({
+          query: { page, limit },
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          grafikBerdasarkanJenisKelamin.findMany.data = res.data.data || [];
+          grafikBerdasarkanJenisKelamin.findMany.total = res.data.total || 0;
+          grafikBerdasarkanJenisKelamin.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load grafik berdasarkan jenis kelamin:", res.data?.message);
+          grafikBerdasarkanJenisKelamin.findMany.data = [];
+          grafikBerdasarkanJenisKelamin.findMany.total = 0;
+          grafikBerdasarkanJenisKelamin.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading grafik berdasarkan jenis kelamin:", error);
+        grafikBerdasarkanJenisKelamin.findMany.data = [];
+        grafikBerdasarkanJenisKelamin.findMany.total = 0;
+        grafikBerdasarkanJenisKelamin.findMany.totalPages = 1;
+      } finally {
+        grafikBerdasarkanJenisKelamin.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanResponden.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -11,17 +12,7 @@ const templateGrafikResponden = z.object({
   tidakbaik: z.string().min(1, "Data tidak baik harus diisi"),
 });
 
-type GrafikResponden = Prisma.GrafikBerdasarkanRespondenGetPayload<{
+const defaultForm = {
-  select: {
-    id: true;
-    sangatbaik: true;
-    baik: true;
-    kurangbaik: true;
-    tidakbaik: true;
-  };
-}>;
-
-const defaultForm: Omit<GrafikResponden, 'id'> & { id?: string } = {
   sangatbaik: "",
   baik: "",
   kurangbaik: "",
@@ -30,7 +21,7 @@ const defaultForm: Omit<GrafikResponden, 'id'> & { id?: string } = {
 
 const grafikBerdasarkanResponden = proxy({
   create: {
-    form: defaultForm,
+    form: {...defaultForm},
     loading: false,
     async create() {
       const cek = templateGrafikResponden.safeParse(
@@ -48,40 +39,52 @@ const grafikBerdasarkanResponden = proxy({
           "create"
         ].post(grafikBerdasarkanResponden.create.form);
         if (res.status === 200) {
-          const id = res.data?.data?.id;
+          toast.success("Grafik berdasarkan responden berhasil ditambahkan");
-          if (id) {
+          await grafikBerdasarkanResponden.findMany.load();
-            toast.success("Success create");
+        } else {
-            grafikBerdasarkanResponden.create.form = {
+          toast.error(res.data?.message ?? "Gagal tambah grafik berdasarkan responden");
-              sangatbaik: "",
-              baik: "",
-              kurangbaik: "",
-              tidakbaik: "",
-            };
-            grafikBerdasarkanResponden.findMany.load();
-            return id;
-          }
         }
-        return toast.error("failed create");
       } catch (error) {
-        console.log((error as Error).message);
+        console.error("Gagal create:", error);
+        toast.error("Terjadi kesalahan saat menambahkan grafik berdasarkan responden");
       } finally {
         grafikBerdasarkanResponden.create.loading = false;
       }
     },
   },
   findMany: {
-    data: null as
+    data: null as any[] | null,
-      | Prisma.GrafikBerdasarkanRespondenGetPayload<{
+    page: 1,
-          omit: { isActive: true };
+    totalPages: 1,
-        }>[]
+    total: 0,
-      | null,
     loading: false,
-    async load() {
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
-      const res = await ApiFetch.api.ppid.grafikberdasarkanresponden[
+      grafikBerdasarkanResponden.findMany.loading = true;  // Use the full path to access the property
-        "find-many"
+      grafikBerdasarkanResponden.findMany.page = page;
-      ].get();
+      try {
-      if (res.status === 200) {
+        const res = await ApiFetch.api.ppid.grafikberdasarkanresponden[
-        grafikBerdasarkanResponden.findMany.data = res.data?.data ?? [];
+          "find-many"
+        ].get({
+          query: { page, limit },
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          grafikBerdasarkanResponden.findMany.data = res.data.data || [];
+          grafikBerdasarkanResponden.findMany.total = res.data.total || 0;
+          grafikBerdasarkanResponden.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load grafik berdasarkan responden:", res.data?.message);
+          grafikBerdasarkanResponden.findMany.data = [];
+          grafikBerdasarkanResponden.findMany.total = 0;
+          grafikBerdasarkanResponden.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading grafikBerdasarkanResponden:", error);
+        grafikBerdasarkanResponden.findMany.data = [];
+        grafikBerdasarkanResponden.findMany.total = 0;
+        grafikBerdasarkanResponden.findMany.totalPages = 1;
+      } finally {
+        grafikBerdasarkanResponden.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanUmur.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -11,17 +12,7 @@ const templateGrafikUmur = z.object({
   lansia: z.string().min(1, "Data lansia harus diisi"),
 });
 
-type GrafikUmur = Prisma.GrafikBerdasarkanUmurGetPayload<{
+const defaultForm = {
-  select: {
-    id: true;
-    remaja: true;
-    dewasa: true;
-    orangtua: true;
-    lansia: true;
-  };
-}>;
-
-const defaultForm: Omit<GrafikUmur, "id"> & { id?: string } = {
   remaja: "",
   dewasa: "",
   orangtua: "",
@@ -30,7 +21,7 @@ const defaultForm: Omit<GrafikUmur, "id"> & { id?: string } = {
 
 const grafikBerdasarkanUmur = proxy({
   create: {
-    form: defaultForm,
+    form: {...defaultForm},
     loading: false,
     async create() {
       const cek = templateGrafikUmur.safeParse(
@@ -70,18 +61,38 @@ const grafikBerdasarkanUmur = proxy({
     },
   },
   findMany: {
-    data: null as
+    data: null as any[] | null,
-      | Prisma.GrafikBerdasarkanUmurGetPayload<{
+    page: 1,
-          omit: { isActive: true };
+    totalPages: 1,
-        }>[]
+    total: 0,
-      | null,
     loading: false,
-    async load() {
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
-      const res = await ApiFetch.api.ppid.grafikberdasarkanumur[
+      grafikBerdasarkanUmur.findMany.loading = true;  // Use the full path to access the property
-        "find-many"
+      grafikBerdasarkanUmur.findMany.page = page;
-      ].get();
+      try {
-      if (res.status === 200) {
+        const res = await ApiFetch.api.ppid.grafikberdasarkanumur[
-        grafikBerdasarkanUmur.findMany.data = res.data?.data ?? [];
+          "find-many"
+        ].get({
+          query: { page, limit },
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          grafikBerdasarkanUmur.findMany.data = res.data.data || [];
+          grafikBerdasarkanUmur.findMany.total = res.data.total || 0;
+          grafikBerdasarkanUmur.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load grafik berdasarkan umur:", res.data?.message);
+          grafikBerdasarkanUmur.findMany.data = [];
+          grafikBerdasarkanUmur.findMany.total = 0;
+          grafikBerdasarkanUmur.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading grafik berdasarkan umur:", error);
+        grafikBerdasarkanUmur.findMany.data = [];
+        grafikBerdasarkanUmur.findMany.total = 0;
+        grafikBerdasarkanUmur.findMany.totalPages = 1;
+      } finally {
+        grafikBerdasarkanUmur.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikHasilKepuasan.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -9,22 +10,14 @@ const templateGrafikHasilKepuasanMasyarakat = z.object({
   kepuasan: z.string().min(1, "Kepuasan harus diisi"),
 });
 
-type GrafikHasilKepuasanMasyarakat = Prisma.IndeksKepuasanMasyarakatGetPayload<{
+const defaultForm = {
-  select: {
-    id: true;
-    label: true;
-    kepuasan: true;
-  };
-}>;
-
-const defaultForm: Omit<GrafikHasilKepuasanMasyarakat, 'id'> & { id?: string } = {
   label: "",
   kepuasan: "",
 };
 
 const grafikHasilKepuasanMasyarakat = proxy({
   create: {
-    form: defaultForm,
+    form: {...defaultForm},
     loading: false,
     async create() {
       const cek = templateGrafikHasilKepuasanMasyarakat.safeParse(
@@ -38,42 +31,52 @@ const grafikHasilKepuasanMasyarakat = proxy({
       }
       try {
         grafikHasilKepuasanMasyarakat.create.loading = true;
-        const res = await ApiFetch.api.ppid.grafikhasilkepuasamanmasyarakat["create"].post(
+        const res = await ApiFetch.api.ppid.grafikhasilkepuasamanmasyarakat["create"].post(grafikHasilKepuasanMasyarakat.create.form);
-          grafikHasilKepuasanMasyarakat.create.form
-        );
         if (res.status === 200) {
-          const id = res.data?.data?.id;
+          toast.success("Grafik hasil kepuasan masyarakat berhasil ditambahkan");
-          if (id) {
+          await grafikHasilKepuasanMasyarakat.findMany.load();
-            toast.success("Success create");
+        } else {
-            grafikHasilKepuasanMasyarakat.create.form = {
+          toast.error(res.data?.message ?? "Gagal tambah grafik hasil kepuasan masyarakat");
-              label: "",
-              kepuasan: "",
-            };
-            grafikHasilKepuasanMasyarakat.findMany.load();
-            return id;
-          }
         }
-        
-        return toast.error("failed create");
       } catch (error) {
-        console.log((error as Error).message);
+        console.error("Gagal create:", error);
+        toast.error("Terjadi kesalahan saat menambahkan grafik hasil kepuasan masyarakat");
       } finally {
         grafikHasilKepuasanMasyarakat.create.loading = false;
       }
     },
   },
   findMany: {
-    data: null as
+    data: null as any[] | null,
-      | Prisma.IndeksKepuasanMasyarakatGetPayload<{
+    page: 1,
-          omit: { isActive: true };
+    totalPages: 1,
-        }>[]
+    total: 0,
-      | null,
+    loading: false,
-    async load() {
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
-      const res = await ApiFetch.api.ppid.grafikhasilkepuasamanmasyarakat[
+      grafikHasilKepuasanMasyarakat.findMany.loading = true;  // Use the full path to access the property
-        "find-many"
+      grafikHasilKepuasanMasyarakat.findMany.page = page;
-      ].get();
+      try {
-      if (res.status === 200) {
+        const res = await ApiFetch.api.ppid.grafikhasilkepuasamanmasyarakat["find-many"].get({
-        grafikHasilKepuasanMasyarakat.findMany.data = res.data?.data ?? [];
+          query: { page, limit },
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          grafikHasilKepuasanMasyarakat.findMany.data = res.data.data || [];
+          grafikHasilKepuasanMasyarakat.findMany.total = res.data.total || 0;
+          grafikHasilKepuasanMasyarakat.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load grafik hasil kepuasan masyarakat:", res.data?.message);
+          grafikHasilKepuasanMasyarakat.findMany.data = [];
+          grafikHasilKepuasanMasyarakat.findMany.total = 0;
+          grafikHasilKepuasanMasyarakat.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading grafik hasil kepuasan masyarakat:", error);
+        grafikHasilKepuasanMasyarakat.findMany.data = [];
+        grafikHasilKepuasanMasyarakat.findMany.total = 0;
+        grafikHasilKepuasanMasyarakat.findMany.totalPages = 1;
+      } finally {
+        grafikHasilKepuasanMasyarakat.findMany.loading = false;
       }
     },
   },

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

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Grid, GridCol, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Grid, GridCol, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -40,8 +40,8 @@ function ListBerita({ search }: { search: string }) {
 
   // Fetch pertama kali
   useShallowEffect(() => {
-    load(page); // awal page = 1
+    load(page, 10); // awal page = 1
-  }, []);
+  }, [page]);
 
   const filteredData = (data || []).filter((item) => {
     const keyword = search.toLowerCase();
@@ -57,14 +57,6 @@ function ListBerita({ search }: { search: string }) {
 
   return (
     <Box py={10}>
-      <Pagination
-        value={page}
-        onChange={(newPage) => load(newPage)} // ini penting!
-        total={totalPages}
-        mt="md"
-        mb="md"
-      />
-
       <Paper bg={colors["white-1"]} p={"md"}>
         <Stack>
           <Grid>
@@ -128,6 +120,15 @@ function ListBerita({ search }: { search: string }) {
           </Box>
         </Stack>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
     </Box>
   );
 }

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

@@ -10,17 +10,29 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
+interface FormDaftarInformasi {
+  jenisInformasi: string;
+  deskripsi: string;
+  tanggal: string;
+}
+
 function EditDaftarInformasiPublik() {
   const daftarInformasi = useProxy(daftarInformasiPublik)
   const router = useRouter()
   const params = useParams()
 
-  const [formData, setFormData] = useState({
+  const [formData, setFormData] = useState<FormDaftarInformasi>({
-    jenisInformasi: daftarInformasi.edit.form.jenisInformasi || '',
+    jenisInformasi: '',
-    deskripsi: daftarInformasi.edit.form.deskripsi || '',
+    deskripsi: '',
-    tanggal: daftarInformasi.edit.form.tanggal || '',
+    tanggal: '',
   })
 
+  const formatDateForInput = (dateString: string) => {
+    if (!dateString) return '';
+    const date = new Date(dateString);
+    return date.toISOString().split('T')[0];
+  };
+
   useEffect(() => {
     const loadDaftarInformasi = async () => {
       const id = params?.id as string;
@@ -48,12 +60,11 @@ function EditDaftarInformasiPublik() {
     try {
       daftarInformasi.edit.form = {
         ...daftarInformasi.edit.form,
-        jenisInformasi: formData.jenisInformasi,
+        jenisInformasi: formData.jenisInformasi.trim(),
-        deskripsi: formData.deskripsi,
+        deskripsi: formData.deskripsi.trim(),
-        tanggal: formData.tanggal,
+        tanggal: formData.tanggal.trim(),
       }
       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);
@@ -73,7 +84,7 @@ function EditDaftarInformasiPublik() {
           <Title order={3}>Edit Daftar Informasi Publik Desa Darmasaba</Title>
           <TextInput
             value={formData.jenisInformasi}
-            label="Jenis Informasi"
+            label={<Text fz={"sm"} fw={"bold"}>Jenis Informasi</Text>}
             placeholder="masukkan jenis informasi"
             onChange={(val) => {
               setFormData({
@@ -93,8 +104,9 @@ function EditDaftarInformasiPublik() {
             />
           </Box>
           <TextInput
-            value={formData.tanggal}
+            type='date'
-            label="Tanggal Publikasi"
+            value={formatDateForInput(formData.tanggal)}
+            label={<Text fz={"sm"} fw={"bold"}>Tanggal Publikasi</Text>}
             placeholder="masukkan tanggal publikasi"
             onChange={(val) => {
               setFormData({

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

@@ -56,7 +56,9 @@ function DetailDaftarInformasiPublik() {
                 </Box>
                 <Box>
                   <Text fw={"bold"} fz={"lg"}>Tanggal</Text>
-                  <Text fz={"lg"}>{stateDaftarInformasi.findUnique.data?.tanggal}</Text>
+                  <Text fz={"lg"}>{stateDaftarInformasi.findUnique.data?.tanggal
+                    ? new Date(stateDaftarInformasi.findUnique.data.tanggal).toLocaleDateString()
+                    : "-"}</Text>
                 </Box>
                 <Box>
                   <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>

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

@@ -42,7 +42,7 @@ export default function CreateBerita() {
         <Stack gap={"xs"}>
           <Title order={3}>Create Daftar Informasi Publik Desa Darmasaba</Title>
           <TextInput
-            label="Jenis Informasi"
+            label={<Text fz={"sm"} fw={"bold"}>Jenis Informasi</Text>}
             placeholder="masukkan jenis informasi"
             onChange={(val) => {
               daftarInformasi.create.form.jenisInformasi = val.target.value
@@ -58,13 +58,13 @@ export default function CreateBerita() {
             />
           </Box>
           <TextInput
-            label="Tanggal Publikasi"
+            label={<Text fz={"sm"} fw={"bold"}>Tanggal Publikasi</Text>}
-            placeholder="masukkan tanggal publikasi"
+            type="date"
-            onChange={(val) => {
+            placeholder="Contoh: 2022-01-01"
-              daftarInformasi.create.form.tanggal = val.target.value
+            value={daftarInformasi.create.form.tanggal}
-            }}
+            onChange={(e) => (daftarInformasi.create.form.tanggal = e.currentTarget.value)}
           />
-          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan Berita</Button>
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
         </Stack>
       </Paper>
     </Box>

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

@@ -1,12 +1,13 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
-import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
 import daftarInformasiPublik from '../../_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
 
 function DaftarInformasiPublik() {
@@ -14,7 +15,7 @@ function DaftarInformasiPublik() {
   return (
     <Box>
       <HeaderSearch
-        title='Posisi Organisasi'
+        title='Daftar Informasi Publik Desa Darmasaba'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
         value={search}
@@ -29,12 +30,14 @@ function ListDaftarInformasi({ search }: { search: string }) {
   const listData = useProxy(daftarInformasiPublik)
   const router = useRouter()
 
-  useShallowEffect(() => {
+  const { data, page, totalPages, loading, load } = listData.findMany
-    listData.findMany.load()
+
-  }, [])
+  useEffect(() => {
+    load(page, 10)
+  }, [page])
 
 
-  const filteredData = (listData.findMany.data || []).filter(item => {
+  const filteredData = (data || []).filter(item => {
     const keyword = search.toLowerCase();
     return (
       item.jenisInformasi.toLowerCase().includes(keyword) ||
@@ -42,28 +45,47 @@ function ListDaftarInformasi({ search }: { search: string }) {
     );
   });
 
-  if (!listData.findMany.data) {
+  if (loading || !data) {
     return (
-      <Stack>
+      <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={790} />
       </Stack>
-    )
+    );
+  }
+  if (data.length === 0) {
+    return (
+      <Box py={10}>
+        <Paper p="md" >
+          <Stack>
+            <JudulList
+              title='List Daftar Informasi Publik Desa Darmasaba'
+              href='/admin/ppid/daftar-informasi-publik-desa-darmasaba/create'
+            />
+            <Table striped withTableBorder withRowBorders>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Jenis Informasi</TableTh>
+                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+            </Table>
+            <Text ta="center">Tidak ada data daftar informasi publik yang tersedia</Text>
+          </Stack>
+        </Paper>
+      </Box >
+    );
   }
 
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
+      <Paper bg={colors['white-1']} p={'md'} h={{ base: 870, md: 790 }}>
         <Stack>
-          <Grid>
+          <JudulList
-            <GridCol span={{ base: 12, md: 11 }}>
+            title='List Daftar Informasi Publik Desa Darmasaba'
-              <Text fz={"xl"} fw={"bold"}>List Daftar Informasi Publik Desa Darmasaba</Text>
+            href='/admin/ppid/daftar-informasi-publik-desa-darmasaba/create'
-            </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
@@ -74,19 +96,19 @@ function ListDaftarInformasi({ search }: { search: string }) {
             >
               <TableThead>
                 <TableTr>
-                  <TableTh>No</TableTh>
+                  <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
-                  <TableTh>Jenis Informasi</TableTh>
+                  <TableTh style={{ width: '20%' }}>Jenis Informasi</TableTh>
-                  <TableTh>Deskripsi</TableTh>
+                  <TableTh style={{ width: '50%' }}>Deskripsi</TableTh>
-                  <TableTh>Detail</TableTh>
+                  <TableTh style={{ width: '15%', textAlign: 'center' }}>Detail</TableTh>
                 </TableTr>
               </TableThead>
               <TableTbody>
                 {filteredData.map((item, index) => (
                   <TableTr key={item.id}>
-                    <TableTd>{index + 1}</TableTd>
+                    <TableTd style={{ textAlign: 'center' }}>{index + 1}</TableTd>
-                    <TableTd>{item.jenisInformasi}</TableTd>
+                    <TableTd style={{ wordWrap: 'break-word' }}>{item.jenisInformasi}</TableTd>
-                    <TableTd dangerouslySetInnerHTML={{ __html: item.deskripsi }}></TableTd>
+                    <TableTd style={{ wordWrap: 'break-word' }} dangerouslySetInnerHTML={{ __html: item.deskripsi }}></TableTd>
-                    <TableTd>
+                    <TableTd style={{ textAlign: 'center' }}>
                       <Button bg={"green"} onClick={() => router.push(`/admin/ppid/daftar-informasi-publik-desa-darmasaba/${item.id}`)}>
                         <IconDeviceImacCog size={25} />
                       </Button>
@@ -98,6 +120,18 @@ function ListDaftarInformasi({ search }: { search: string }) {
           </Box>
         </Stack>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo(0, 0);
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
     </Box>
   )
 }

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/grafik_berdasarkan_jenis_kelamin_responden/create/page.tsx

@@ -24,16 +24,20 @@ function GrafikBerdasarkanJenisKelaminRespondenCreate() {
   }
 
   const handleSubmit = async () => {
-    const id = await stategrafikBerdasarkanJenisKelamin.create.create();
+    try {
-    if (id) {
+      const id = await stategrafikBerdasarkanJenisKelamin.create.create();
-      const idStr = String(id);
+      if (typeof id !== 'undefined') {
-      await stategrafikBerdasarkanJenisKelamin.findUnique.load(idStr);
+        const idStr = String(id);
-      if (stategrafikBerdasarkanJenisKelamin.findUnique.data) {
+        await stategrafikBerdasarkanJenisKelamin.findUnique.load(idStr);
-        setDonutData([stategrafikBerdasarkanJenisKelamin.findUnique.data]);
+        if (stategrafikBerdasarkanJenisKelamin.findUnique.data) {
+          setDonutData([stategrafikBerdasarkanJenisKelamin.findUnique.data]);
+        }
       }
+      resetForm();
+      router.push("/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_jenis_kelamin_responden");
+    } catch (error) {
+      console.error('Error submitting form:', error);
     }
-    resetForm();
-    router.push("/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_jenis_kelamin_responden")
   }
   return (
     <Box>

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/grafik_berdasarkan_jenis_kelamin_responden/page.tsx

@@ -2,16 +2,16 @@
 'use client'
 import grafikBerdasarkanJenisKelamin from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanJenisKelamin';
 import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { Box, Button, Center, Flex, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { Cell, Pie, PieChart } from 'recharts';
 import { useProxy } from 'valtio/utils';
-import JudulListTab from '../../../_com/judulListTab';
-import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 
 function GrafikBerdasarkanJenisKelamin() {
   const [search, setSearch] = useState("");
@@ -36,6 +36,32 @@ function ListGrafikBerdasarkanJenisKelamin({ search }: { search: string }) {
   const [modalHapus, setModalHapus] = useState(false)
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const router = useRouter();
+  const { data, page, totalPages, loading, load } = stategrafikBerdasarkanJenisKelamin.findMany
+
+
+  useShallowEffect(() => {
+    setMounted(true);
+    load(page, 10)
+  }, [page]);
+
+  useEffect(() => {
+    if (data) {
+      const totalLaki = data.reduce((acc: number, cur: any) => acc + Number(cur.laki || 0), 0);
+      const totalPerempuan = data.reduce((acc: number, cur: any) => acc + Number(cur.perempuan || 0), 0);
+      setDonutData([
+        { name: 'laki', value: totalLaki, color: colors['blue-button'], key: 'laki' },
+        { name: 'perempuan', value: totalPerempuan, color: '#10A85AFF', key: 'perempuan' }
+      ]);
+    }
+  }, [data])
+
+  const filteredData = (data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.laki.toString().toLowerCase().includes(keyword) ||
+      item.perempuan.toString().toLowerCase().includes(keyword)
+    );
+  });
 
   const handleDelete = async () => {
     if (selectedId) {
@@ -47,55 +73,56 @@ function ListGrafikBerdasarkanJenisKelamin({ search }: { search: string }) {
     }
   }
 
-  useShallowEffect(() => {
+  if (loading || !data) {
-    setMounted(true);
-    stategrafikBerdasarkanJenisKelamin.findMany.load()
-  }, []);
-
-  useEffect(() => {
-    if (stategrafikBerdasarkanJenisKelamin.findMany.data) {
-      const totalLaki = stategrafikBerdasarkanJenisKelamin.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.laki || 0), 0);
-      const totalPerempuan = stategrafikBerdasarkanJenisKelamin.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.perempuan || 0), 0);
-      setDonutData([
-        { name: 'laki', value: totalLaki, color: colors['blue-button'], key: 'laki' },
-        { name: 'perempuan', value: totalPerempuan, color: '#10A85AFF', key: 'perempuan' }
-      ]);
-    }
-  }, [stategrafikBerdasarkanJenisKelamin.findMany.data])
-
-  const filteredData = (stategrafikBerdasarkanJenisKelamin.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
     return (
-      item.laki.toString().toLowerCase().includes(keyword) ||
+      <Stack py={10}>
-      item.perempuan.toString().toLowerCase().includes(keyword)
+        <Skeleton height={730} />
+      </Stack>
     );
-  });
+  }
-
+  if (data.length === 0) {
-  if (!stategrafikBerdasarkanJenisKelamin.findMany.data) {
     return (
-      <Box>
+      <Box py={10}>
-        <Skeleton h={500} />
+        <Paper p="md">
-      </Box>
+          <Stack>
-    )
+            <JudulList
+              title='List Data Berdasarkan Jenis Kelamin Responden'
+              href='/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_jenis_kelamin_responden/create'
+            />
+            <Table striped withTableBorder withRowBorders>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Laki-laki</TableTh>
+                  <TableTh>Perempuan</TableTh>
+                  <TableTh>Edit</TableTh>
+                  <TableTh>Delete</TableTh>
+                </TableTr>
+              </TableThead>
+            </Table>
+            <Text ta="center">Tidak ada data berdasarkan jenis kelamin responden yang tersedia</Text>
+          </Stack>
+        </Paper>
+      </Box >
+    );
   }
 
   return (
     <Box>
       <Stack gap={"xs"}>
-        <Paper bg={colors['white-1']} p={"md"}>
+        <Paper bg={colors['white-1']} p={"md"} h={{ base: 730, md: 650 }}>
-          <JudulListTab
+          <JudulList
-            title='List Grafik Berdasarkan Jenis Kelamin Responden'
+            title='List Data Berdasarkan Jenis Kelamin Responden'
             href='/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_jenis_kelamin_responden/create'
-            placeholder='pencarian'
-            searchIcon={<IconSearch size={16} />}
           />
           <Table striped withTableBorder withRowBorders>
             <TableThead>
               <TableTr>
-                <TableTh>Laki-laki</TableTh>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
-                <TableTh>Perempuan</TableTh>
+                <TableTh style={{ width: '20%', textAlign: 'center' }}>Laki-laki</TableTh>
-                <TableTh>Edit</TableTh>
+                <TableTh style={{ width: '20%', textAlign: 'center' }}>Perempuan</TableTh>
-                <TableTh>Delete</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>Edit</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>Delete</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -106,16 +133,17 @@ function ListGrafikBerdasarkanJenisKelamin({ search }: { search: string }) {
                   </TableTd>
                 </TableTr>
               ) : (
-                filteredData.map((item) => (
+                filteredData.map((item, index) => (
                   <TableTr key={item.id}>
-                    <TableTd>{item.laki}</TableTd>
+                    <TableTd style={{ width: '5%', textAlign: 'center' }}>{index + 1}</TableTd>
-                    <TableTd>{item.perempuan}</TableTd>
+                    <TableTd style={{ width: '20%', textAlign: 'center' }}>{item.laki}</TableTd>
-                    <TableTd>
+                    <TableTd style={{ width: '20%', textAlign: 'center' }}>{item.perempuan}</TableTd>
+                    <TableTd style={{ width: '15%', textAlign: 'center' }}>
                       <Button color='green' onClick={() => router.push(`/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_jenis_kelamin_responden/${item.id}`)}>
                         <IconEdit size={20} />
                       </Button>
                     </TableTd>
-                    <TableTd>
+                    <TableTd style={{ width: '15%', textAlign: 'center' }}>
                       <Button
                         color='red'
                         disabled={stategrafikBerdasarkanJenisKelamin.delete.loading}
@@ -130,16 +158,27 @@ function ListGrafikBerdasarkanJenisKelamin({ search }: { search: string }) {
                 ))
               )}
             </TableTbody>
-
           </Table>
         </Paper>
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 10);
+              window.scrollTo(0, 0);
+            }}
+            total={totalPages}
+            mt="md"
+            mb="md"
+          />
+        </Center>
 
         {/* Chart */}
         <Box>
           <Paper bg={colors['white-1']} p={'md'}>
             <Stack>
-              <Title pb={10} order={3}>Grafik Berdasarkan Responden</Title>
+              <Title pb={10} order={3}>Grafik Berdasarkan Jenis Kelamin Responden</Title>
-              {mounted && donutData.length > 0 ? (<Box style={{ width: '100%', height: 'auto', minHeight: 200 }}>
+              {mounted && donutData.length === 0 ? (<Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>) : (<Box style={{ width: '100%', height: 'auto', minHeight: 200 }}>
                 <PieChart
                   width={800} height={300}
                   data={donutData}
@@ -168,8 +207,6 @@ function ListGrafikBerdasarkanJenisKelamin({ search }: { search: string }) {
                   <Text>Perempuan: {donutData.find((entry) => entry.name === 'perempuan')?.value}</Text>
                 </Flex>
               </Box>
-              ) : (
-                <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
               )}
             </Stack>
           </Paper>

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/grafik_berdasarkan_responden/create/page.tsx

@@ -45,7 +45,7 @@ function GrafikBerdasarkanRespondenCreate() {
        </Box>
        <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
          <Stack>
-           <Title order={3}>Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik</Title>
+           <Title order={3}>Grafik Hasil Kepuasan Masyarakat Berdasarkan Responden</Title>
            <TextInput
              label="Sangat Baik"
              type='number'

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/grafik_berdasarkan_responden/page.tsx

@@ -1,17 +1,17 @@
 'use client'
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { Box, Button, Center, Flex, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { Cell, Pie, PieChart } from 'recharts';
 import { useSnapshot } from 'valtio';
-import JudulListTab from '../../../_com/judulListTab';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import grafikBerdasarkanResponden from '../../../_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanResponden';
-import HeaderSearch from '../../../_com/header';
 
 function GrafikBerdasarkanResponden() {
   const [search, setSearch] = useState("");
@@ -37,24 +37,14 @@ function ListGrafikBerdasarkanResponden({ search }: { search: string }) {
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const router = useRouter();
 
-  const handleDelete = async () => {
+  const { data, page, totalPages, loading, load } = stategrafikBerdasarkanResponden.findMany
-    if (selectedId) {
-      await stategrafikBerdasarkanResponden.delete.byId(selectedId);
-      setModalHapus(false);
-      setSelectedId(null);
-  
-      // Refresh data agar chart & tabel ikut update
-      stategrafikBerdasarkanResponden.findMany.load();
-    }
-  }
-  
 
   useShallowEffect(() => {
     setMounted(true)
-    stategrafikBerdasarkanResponden.findMany.load()
+    load(page, 10)
-  }, [])
+  }, [page])
 
-  const filteredData = (stategrafikBerdasarkanResponden.findMany.data || []).filter(item => {
+  const filteredData = (data || []).filter(item => {
     const keyword = search.toLowerCase();
     return (
       item.sangatbaik.toString().toLowerCase().includes(keyword) ||
@@ -65,11 +55,11 @@ function ListGrafikBerdasarkanResponden({ search }: { search: string }) {
   });
 
   useEffect(() => {
-    if (stategrafikBerdasarkanResponden.findMany.data) {
+    if (data) {
-      const totalSangatBaik = stategrafikBerdasarkanResponden.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.sangatbaik || 0), 0);
+      const totalSangatBaik = data.reduce((acc: number, cur: any) => acc + Number(cur.sangatbaik || 0), 0);
-      const totalBaik = stategrafikBerdasarkanResponden.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.baik || 0), 0);
+      const totalBaik = data.reduce((acc: number, cur: any) => acc + Number(cur.baik || 0), 0);
-      const totalKurangBaik = stategrafikBerdasarkanResponden.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.kurangbaik || 0), 0);
+      const totalKurangBaik = data.reduce((acc: number, cur: any) => acc + Number(cur.kurangbaik || 0), 0);
-      const totalTidakBaik = stategrafikBerdasarkanResponden.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.tidakbaik || 0), 0);
+      const totalTidakBaik = data.reduce((acc: number, cur: any) => acc + Number(cur.tidakbaik || 0), 0);
       setDonutData([
         { name: 'sangatbaik', value: totalSangatBaik, color: colors['blue-button'], key: 'sangatbaik' },
         { name: 'baik', value: totalBaik, color: '#10A85AFF', key: 'baik' },
@@ -78,34 +68,72 @@ function ListGrafikBerdasarkanResponden({ search }: { search: string }) {
       ]);
     }
 
-  }, [stategrafikBerdasarkanResponden.findMany.data])
+  }, [data])
 
-  if (!stategrafikBerdasarkanResponden.findMany.data) {
+  const handleDelete = async () => {
+    if (selectedId) {
+      await stategrafikBerdasarkanResponden.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+
+      // Refresh data agar chart & tabel ikut update
+      stategrafikBerdasarkanResponden.findMany.load();
+    }
+  }
+
+  if (loading || !data) {
     return (
-      <Box>
+      <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={730} />
-      </Box>
+      </Stack>
-    )
+    );
+  }
+  if (data.length === 0) {
+    return (
+      <Box py={10}>
+        <Paper p="md" >
+          <Stack>
+            <JudulList
+              title='List Data Berdasarkan Responden'
+              href='/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_responden/create'
+            />
+            <Table striped withTableBorder withRowBorders>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Sangat Baik</TableTh>
+                  <TableTh>Baik</TableTh>
+                  <TableTh>Kurang Baik</TableTh>
+                  <TableTh>Tidak Baik</TableTh>
+                  <TableTh>Edit</TableTh>
+                  <TableTh>Delete</TableTh>
+                </TableTr>
+              </TableThead>
+            </Table>
+            <Text ta="center">Tidak ada data grafik berdasarkan responden yang tersedia</Text>
+          </Stack>
+        </Paper>
+      </Box >
+    );
   }
   return (
     <Box>
       <Stack gap={"xs"}>
-        <Paper bg={colors['white-1']} p={"md"}>
+        <Paper bg={colors['white-1']} p={"md"} h={{ base: 730, md: 650 }}>
-          <JudulListTab
+          <JudulList
-            title='List Grafik Berdasarkan Pilihan Responden'
+            title='List Data Berdasarkan Pilihan Responden'
             href='/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_responden/create'
-            placeholder='pencarian'
-            searchIcon={<IconSearch size={16} />}
           />
           <Table striped withTableBorder withRowBorders>
             <TableThead>
               <TableTr>
-                <TableTh>Sangat Baik</TableTh>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
-                <TableTh>Baik</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>Sangat Baik</TableTh>
-                <TableTh>Kurang Baik</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>Baik</TableTh>
-                <TableTh>Tidak Baik</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>Kurang Baik</TableTh>
-                <TableTh>Edit</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>Tidak Baik</TableTh>
-                <TableTh>Delete</TableTh>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>Edit</TableTh>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>Delete</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -116,18 +144,19 @@ function ListGrafikBerdasarkanResponden({ search }: { search: string }) {
                   </TableTd>
                 </TableTr>
               ) : (
-                filteredData.map((item) => (
+                filteredData.map((item, index) => (
                   <TableTr key={item.id}>
-                    <TableTd>{item.sangatbaik}</TableTd>
+                    <TableTd style={{ width: '5%', textAlign: 'center' }}>{index + 1}</TableTd>
-                    <TableTd>{item.baik}</TableTd>
+                    <TableTd style={{ width: '5%', textAlign: 'center' }}>{item.sangatbaik}</TableTd>
-                    <TableTd>{item.kurangbaik}</TableTd>
+                    <TableTd style={{ width: '15%', textAlign: 'center' }}>{item.baik}</TableTd>
-                    <TableTd>{item.tidakbaik}</TableTd>
+                    <TableTd style={{ width: '15%', textAlign: 'center' }}>{item.kurangbaik}</TableTd>
-                    <TableTd>
+                    <TableTd style={{ width: '15%', textAlign: 'center' }}>{item.tidakbaik}</TableTd>
+                    <TableTd style={{ width: '5%', textAlign: 'center' }}>
                       <Button color='green' onClick={() => router.push(`/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_responden/${item.id}`)}>
                         <IconEdit size={20} />
                       </Button>
                     </TableTd>
-                    <TableTd>
+                    <TableTd style={{ width: '5%', textAlign: 'center' }}>
                       <Button
                         color='red'
                         disabled={stategrafikBerdasarkanResponden.delete.loading}
@@ -145,12 +174,24 @@ function ListGrafikBerdasarkanResponden({ search }: { search: string }) {
 
           </Table>
         </Paper>
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 10);
+              window.scrollTo(0, 0);
+            }}
+            total={totalPages}
+            mt="md"
+            mb="md"
+          />
+        </Center>
 
         {/* Chart */}
         <Box>
           <Paper bg={colors['white-1']} p={'md'}>
             <Stack>
-              <Title pb={10} order={3}>Grafik Berdasarkan Responden</Title>
+              <Title pb={10} order={3}>Grafik Berdasarkan Pilihan Responden</Title>
               {mounted && donutData.length > 0 ? (<Box style={{ width: '100%', height: 'auto', minHeight: 200 }}>
                 <PieChart
                   width={800} height={300}

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/grafik_berdasarkan_umur/page.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import grafikBerdasarkanUmur from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanUmur';
 import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { Box, Button, Center, Flex, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -12,6 +12,7 @@ import { useProxy } from 'valtio/utils';
 import JudulListTab from '../../../_com/judulListTab';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
 
 function GrafikBerdasarakanUmur() {
   const [search, setSearch] = useState("");
@@ -36,6 +37,37 @@ function ListGrafikBerdasarakanUmur({ search }: { search: string }) {
   const [modalHapus, setModalHapus] = useState(false)
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const router = useRouter()
+  const { data, page, totalPages, loading, load } = stategrafikBerdasarkanUmur.findMany
+
+  useShallowEffect(() => {
+    setMounted(true);
+    load(page, 10)
+  }, [page]);
+
+  useEffect(() => {
+    if (data) {
+      const totalRemaja = data.reduce((acc: number, cur: any) => acc + Number(cur.remaja || 0), 0);
+      const totalDewasa = data.reduce((acc: number, cur: any) => acc + Number(cur.dewasa || 0), 0);
+      const totalOrangtua = data.reduce((acc: number, cur: any) => acc + Number(cur.orangtua || 0), 0);
+      const totalLansia = data.reduce((acc: number, cur: any) => acc + Number(cur.lansia || 0), 0);
+      setDonutData([
+        { name: 'remaja', value: totalRemaja, color: colors['blue-button'], key: 'remaja' },
+        { name: 'dewasa', value: totalDewasa, color: '#D32711FF', key: 'dewasa' },
+        { name: 'orangtua', value: totalOrangtua, color: '#B46B04FF', key: 'orangtua' },
+        { name: 'lansia', value: totalLansia, color: '#038617FF', key: 'lansia' }
+      ]);
+    }
+  }, [data])
+
+  const filteredData = (data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.remaja.toString().toLowerCase().includes(keyword) ||
+      item.dewasa.toString().toLowerCase().includes(keyword) ||
+      item.orangtua.toString().toLowerCase().includes(keyword) ||
+      item.lansia.toString().toLowerCase().includes(keyword)
+    );
+  });
 
   const handleDelete = async () => {
     if (selectedId) {
@@ -47,50 +79,48 @@ function ListGrafikBerdasarakanUmur({ search }: { search: string }) {
     }
   }
 
-  useShallowEffect(() => {
+  if (loading || !data) {
-    setMounted(true);
-    stategrafikBerdasarkanUmur.findMany.load()
-  }, []);
-
-  useEffect(() => {
-    if (stategrafikBerdasarkanUmur.findMany.data) {
-      const totalRemaja = stategrafikBerdasarkanUmur.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.remaja || 0), 0);
-      const totalDewasa = stategrafikBerdasarkanUmur.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.dewasa || 0), 0);
-      const totalOrangtua = stategrafikBerdasarkanUmur.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.orangtua || 0), 0);
-      const totalLansia = stategrafikBerdasarkanUmur.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.lansia || 0), 0);
-      setDonutData([
-        { name: 'remaja', value: totalRemaja, color: colors['blue-button'], key: 'remaja' },
-        { name: 'dewasa', value: totalDewasa, color: '#D32711FF', key: 'dewasa' },
-        { name: 'orangtua', value: totalOrangtua, color: '#B46B04FF', key: 'orangtua' },
-        { name: 'lansia', value: totalLansia, color: '#038617FF', key: 'lansia' }
-      ]);
-    }
-  }, [stategrafikBerdasarkanUmur.findMany.data])
-
-  const filteredData = (stategrafikBerdasarkanUmur.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
     return (
-      item.remaja.toString().toLowerCase().includes(keyword) ||
+      <Stack py={10}>
-      item.dewasa.toString().toLowerCase().includes(keyword) ||
+        <Skeleton height={730} />
-      item.orangtua.toString().toLowerCase().includes(keyword) ||
+      </Stack>
-      item.lansia.toString().toLowerCase().includes(keyword)
     );
-  });
+  }
-
+  if (data.length === 0) {
-  if (!stategrafikBerdasarkanUmur.findMany.data) {
     return (
-      <Box>
+      <Box py={10}>
-        <Skeleton h={500} />
+        <Paper p="md" >
-      </Box>
+          <Stack>
-    )
+            <JudulList
+              title='List Data Berdasarkan Umur Responden'
+              href='/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_umur/create'
+            />
+            <Table striped withTableBorder withRowBorders>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Remaja</TableTh>
+                  <TableTh>Dewasa</TableTh>
+                  <TableTh>Orangtua</TableTh>
+                  <TableTh>Lansia</TableTh>
+                  <TableTh>Edit</TableTh>
+                  <TableTh>Delete</TableTh>
+                </TableTr>
+              </TableThead>
+            </Table>
+            <Text ta="center">Tidak ada data grafik berdasarkan umur responden yang tersedia</Text>
+          </Stack>
+        </Paper>
+      </Box >
+    );
   }
 
   return (
     <Box>
       <Stack gap={"xs"}>
-        <Paper bg={colors['white-1']} p={"md"}>
+        <Paper bg={colors['white-1']} p={"md"} h={{ base: 730, md: 650 }}>
           <JudulListTab
-            title='List Grafik Berdasarkan Umur Responden'
+            title='List Data Berdasarkan Umur Responden'
             href='/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_umur/create'
             placeholder='pencarian'
             searchIcon={<IconSearch size={16} />}
@@ -98,12 +128,13 @@ function ListGrafikBerdasarakanUmur({ search }: { search: string }) {
           <Table striped withTableBorder withRowBorders>
             <TableThead>
               <TableTr>
-                <TableTh>Remaja</TableTh>
+                <TableTh style={{ width: '2%', textAlign: 'center' }}>No</TableTh>
-                <TableTh>Dewasa</TableTh>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>Remaja</TableTh>
-                <TableTh>Orangtua</TableTh>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>Dewasa</TableTh>
-                <TableTh>Lansia</TableTh>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>Orangtua</TableTh>
-                <TableTh>Edit</TableTh>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>Lansia</TableTh>
-                <TableTh>Delete</TableTh>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>Edit</TableTh>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>Delete</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -116,16 +147,17 @@ function ListGrafikBerdasarakanUmur({ search }: { search: string }) {
               ) : (
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
-                    <TableTd>{item.remaja}</TableTd>
+                    <TableTd style={{ textAlign: 'center' }}>{filteredData.indexOf(item) + 1}</TableTd>
-                    <TableTd>{item.dewasa}</TableTd>
+                    <TableTd style={{ textAlign: 'center' }}>{item.remaja}</TableTd>
-                    <TableTd>{item.orangtua}</TableTd>
+                    <TableTd style={{ textAlign: 'center' }}>{item.dewasa}</TableTd>
-                    <TableTd>{item.lansia}</TableTd>
+                    <TableTd style={{ textAlign: 'center' }}>{item.orangtua}</TableTd>
-                    <TableTd>
+                    <TableTd style={{ textAlign: 'center' }}>{item.lansia}</TableTd>
+                    <TableTd style={{ textAlign: 'center' }}>
                       <Button color='green' onClick={() => router.push(`/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_umur/${item.id}`)}>
                         <IconEdit size={20} />
                       </Button>
                     </TableTd>
-                    <TableTd>
+                    <TableTd style={{ textAlign: 'center' }}>
                       <Button
                         color='red'
                         disabled={stategrafikBerdasarkanUmur.delete.loading}
@@ -143,12 +175,24 @@ function ListGrafikBerdasarakanUmur({ search }: { search: string }) {
 
           </Table>
         </Paper>
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 10);
+              window.scrollTo(0, 0);
+            }}
+            total={totalPages}
+            mt="md"
+            mb="md"
+          />
+        </Center>
 
         {/* Chart */}
         <Box>
           <Paper bg={colors['white-1']} p={'md'}>
             <Stack>
-              <Title pb={10} order={3}>Grafik Berdasarkan Responden</Title>
+              <Title pb={10} order={3}>Grafik Umur Berdasarkan Responden</Title>
               {mounted && donutData.length > 0 ? (<Box style={{ width: '100%', height: 'auto', minHeight: 200 }}>
                 <PieChart
                   width={800} height={300}

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/grafik_hasil_kepuasan_masyarakat/page.tsx

@@ -1,16 +1,16 @@
 'use client'
-import JudulListTab from '@/app/admin/(dashboard)/_com/judulListTab';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
 import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
 import { useSnapshot } from 'valtio';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import grafikHasilKepuasanMasyarakat from '../../../_state/ppid/indeks_kepuasan_masyarakat/grafikHasilKepuasan';
-import HeaderSearch from '../../../_com/header';
 
 
 function GrafikHasilKepuasanMasyarakat() {
@@ -46,8 +46,34 @@ function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) {
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const router = useRouter();
 
+  const { data, page, totalPages, loading, load } = stateGrafikHasilKepuasan.findMany
 
 
+  useShallowEffect(() => {
+    setMounted(true)
+    load(page, 10)
+  }, [page])
+
+  useEffect(() => {
+    if (data) {
+      setChartData(
+        data.map((item) => ({
+          id: item.id,
+          label: item.label,
+          kepuasan: Number(item.kepuasan),
+        }))
+      );
+    }
+  }, [data]);
+
+  const filteredData = (data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.label.toLowerCase().includes(keyword) ||
+      item.kepuasan.toString().toLowerCase().includes(keyword)
+    );
+  });
+
   const handleDelete = () => {
     if (selectedId) {
       stateGrafikHasilKepuasan.delete.byId(selectedId)
@@ -58,70 +84,69 @@ function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) {
     }
   }
 
-  useShallowEffect(() => {
+  if (loading || !data) {
-    setMounted(true)
-    stateGrafikHasilKepuasan.findMany.load()
-  }, [])
-
-  useEffect(() => {
-    if (stateGrafikHasilKepuasan.findMany.data) {
-      setChartData(
-        stateGrafikHasilKepuasan.findMany.data.map((item) => ({
-          id: item.id,
-          label: item.label,
-          kepuasan: Number(item.kepuasan),
-        }))
-      );
-    }
-  }, [stateGrafikHasilKepuasan.findMany.data]);
-
-  const filteredData = (stateGrafikHasilKepuasan.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
     return (
-      item.label.toLowerCase().includes(keyword) ||
+      <Stack py={10}>
-      item.kepuasan.toString().toLowerCase().includes(keyword)
+        <Skeleton height={730} />
-    );
-  });
-
-
-
-  if (!stateGrafikHasilKepuasan.findMany.data) {
-    return (
-      <Stack>
-        <Skeleton h={500} />
       </Stack>
-    )
+    );
+  }
+  if (data.length === 0) {
+    return (
+      <Box py={10}>
+        <Paper p="md" >
+          <Stack>
+            <JudulList
+              title='List Data Hasil Kepuasan Masyarakat'
+              href='/admin/ppid/ikm-desa-darmasaba/grafik_hasil_kepuasan_masyarakat/create'
+            />
+            <Table striped withTableBorder withRowBorders>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Label</TableTh>
+                  <TableTh>Jumlah Kepuasan</TableTh>
+                  <TableTh>Edit</TableTh>
+                  <TableTh>Delete</TableTh>
+                </TableTr>
+              </TableThead>
+            </Table>
+            <Text ta="center">Tidak ada data grafik hasil kepuasan masyarakat yang tersedia</Text>
+          </Stack>
+        </Paper>
+      </Box >
+    );
   }
   return (
     <Box>
       <Stack gap={"xs"}>
-        <Paper bg={colors['white-1']} p={'md'}>
+        <Paper bg={colors['white-1']} p={'md'} h={{ base: 730, md: 650 }}>
-          <JudulListTab
+          <JudulList
-            title='List Grafik Hasil Kepuasan Masyarakat'
+            title='List Data Hasil Kepuasan Masyarakat'
             href='/admin/ppid/ikm-desa-darmasaba/grafik_hasil_kepuasan_masyarakat/create'
-            placeholder='pencarian'
-            searchIcon={<IconSearch size={16} />}
           />
           <Table striped withTableBorder withRowBorders>
             <TableThead>
               <TableTr>
-                <TableTh>Label</TableTh>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
-                <TableTh>Jumlah Kepuasan</TableTh>
+                <TableTh style={{ width: '20%', textAlign: 'center' }}>Label</TableTh>
-                <TableTh>Edit</TableTh>
+                <TableTh style={{ width: '20%', textAlign: 'center' }}>Jumlah Kepuasan</TableTh>
-                <TableTh>Delete</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>Edit</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>Delete</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
-              {filteredData.map((item) => (
+              {filteredData.map((item, index) => (
                 <TableTr key={item.id}>
-                  <TableTd>{item.label}</TableTd>
+                  <TableTd style={{ textAlign: 'center' }}>{index + 1}</TableTd>
-                  <TableTd>{item.kepuasan}</TableTd>
+                  <TableTd style={{ textAlign: 'center' }}>{item.label}</TableTd>
-                  <TableTd>
+                  <TableTd style={{ textAlign: 'center' }}>{item.kepuasan}</TableTd>
+                  <TableTd style={{ textAlign: 'center' }}>
                     <Button color='green' onClick={() => router.push(`/admin/ppid/ikm-desa-darmasaba/grafik_hasil_kepuasan_masyarakat/${item.id}`)}>
                       <IconEdit size={20} />
                     </Button>
                   </TableTd>
-                  <TableTd>
+                  <TableTd style={{ textAlign: 'center' }}>
                     <Button
                       color='red'
                       disabled={stateGrafikHasilKepuasan.delete.loading}
@@ -137,12 +162,24 @@ function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Paper>
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 10);
+              window.scrollTo(0, 0);
+            }}
+            total={totalPages}
+            mt="md"
+            mb="md"
+          />
+        </Center>
 
         {/* Chart */}
         <Box style={{ width: '100%', minWidth: 300, height: 500, minHeight: 300 }}>
           <Paper style={{ width: '100%', minWidth: 300, height: 500, minHeight: 300 }} bg={colors['white-1']} p={'md'}>
             <Stack gap={"xs"}>
-              <Title pb={10} order={3}>Data Kepuasan Masyarakat</Title>
+              <Title pb={10} order={3}>Grafik Hasil Kepuasan Masyarakat</Title>
               {mounted && chartData.length > 0 ? (
                 <BarChart width={isMobile ? 300 : isTablet ? 300 : 300} height={380} data={chartData} >
                   <XAxis dataKey="label" />

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

@@ -1,21 +1,18 @@
 import prisma from "@/lib/prisma";
-import { Prisma } from "@prisma/client";
 import { Context } from "elysia";
 
-type FormCreate = Prisma.DaftarInformasiPublikGetPayload<{
+type FormCreate = {
-    select: {
+    jenisInformasi: string;
-        jenisInformasi: true;
+    deskripsi: string;
-        deskripsi: true;
+    tanggal: string;
-        tanggal: true;
+}
-    }
-}>
 export default async function daftarInformasiPublikCreate(context: Context) {
     const body = context.body as FormCreate;
     await prisma.daftarInformasiPublik.create({
         data: { 
             jenisInformasi: body.jenisInformasi,
             deskripsi: body.deskripsi,
-            tanggal: body.tanggal,
+            tanggal: new Date(body.tanggal),
         },
     })
     return {

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

@@ -1,6 +1,12 @@
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
+type FormEdit = {
+  jenisInformasi: string;
+  deskripsi: string;
+  tanggal: string;
+};
+
 export default async function daftarInformasiPublikEdit(context: Context) {
   const id = context.params?.id;
 
@@ -11,11 +17,7 @@ export default async function daftarInformasiPublikEdit(context: Context) {
     };
   }
 
-  const { jenisInformasi, deskripsi, tanggal } = context.body as {
+  const body = context.body as FormEdit;
-    jenisInformasi: string;
-    deskripsi: string;
-    tanggal: string;
-  };
 
   const existing = await prisma.daftarInformasiPublik.findUnique({
     where: {
@@ -33,9 +35,9 @@ export default async function daftarInformasiPublikEdit(context: Context) {
   const updated = await prisma.daftarInformasiPublik.update({
     where: { id },
     data: {
-      jenisInformasi,
+      jenisInformasi: body.jenisInformasi,
-      deskripsi,
+      deskripsi: body.deskripsi,
-      tanggal,
+      tanggal: new Date(body.tanggal),
     },
   });
 

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

@@ -1,9 +1,44 @@
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+// Di findMany.ts
+export default async function daftarInformasiPublikFindMany(context: Context) {
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const skip = (page - 1) * limit;
+
+  try {
+    const [data, total] = await Promise.all([
+      prisma.daftarInformasiPublik.findMany({
+        where: { isActive: true },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.daftarInformasiPublik.count({
+        where: { isActive: true }
+      })
+    ]);
+
+    const totalPages = Math.ceil(total / limit);
 
-export default async function daftarInformasiPublikFindMany() {
-    const res = await prisma.daftarInformasiPublik.findMany();
     return {
-        data: res
+      success: true,
-    }
+      message: "Success fetch daftar informasi publik with pagination",
-}
+      data,
-    
+      page,
+      totalPages,
+      total,
+    };
+  } catch (e) {
+    console.error("Find many paginated error:", e);
+    return {
+      success: false,
+      message: "Failed fetch daftar informasi publik with pagination",
+      data: [],
+      page: 1,
+      totalPages: 1,
+      total: 0,
+    };
+  }
+}

src/app/api/[[...slugs]]/_lib/ppid/ikm/grafik_berdasarkan_jenis_kelamin/find-many.ts

@@ -1,8 +1,43 @@
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function grafikBerdasarkanJenisKelaminFindMany() {
+export default async function grafikBerdasarkanJenisKelaminFindMany(context: Context) {
-    const res = await prisma.grafikBerdasarkanJenisKelamin.findMany();
+    const page = Number(context.query.page) || 1;
-    return {
+    const limit = Number(context.query.limit) || 10;
-        data: res
+    const skip = (page - 1) * limit;
+  
+    try {
+      const [data, total] = await Promise.all([
+        prisma.grafikBerdasarkanJenisKelamin.findMany({
+          where: { isActive: true },
+          skip,
+          take: limit,
+          orderBy: { createdAt: 'desc' },
+        }),
+        prisma.grafikBerdasarkanJenisKelamin.count({
+          where: { isActive: true }
+        })
+      ]);
+  
+      const totalPages = Math.ceil(total / limit);
+  
+      return {
+        success: true,
+        message: "Success fetch grafik berdasarkan jenis kelamin with pagination",
+        data,
+        page,
+        totalPages,
+        total,
+      };
+    } catch (e) {
+      console.error("Find many paginated error:", e);
+      return {
+        success: false,
+        message: "Failed fetch grafik berdasarkan jenis kelamin with pagination",
+        data: [],
+        page: 1,
+        totalPages: 1,
+        total: 0,
+      };
     }
 }

src/app/api/[[...slugs]]/_lib/ppid/ikm/grafik_berdasarkan_umur/find-many.ts

@@ -1,8 +1,43 @@
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export async function grafikBerdasarkanUmurFindMany(){
+export default async function grafikBerdasarkanUmurFindMany(context: Context){
-    const res = await prisma.grafikBerdasarkanUmur.findMany();
+     const page = Number(context.query.page) || 1;
-    return {
+     const limit = Number(context.query.limit) || 10;
-        data: res
+     const skip = (page - 1) * limit;
-    }
+   
+     try {
+       const [data, total] = await Promise.all([
+         prisma.grafikBerdasarkanUmur.findMany({
+           where: { isActive: true },
+           skip,
+           take: limit,
+           orderBy: { createdAt: 'desc' },
+         }),
+         prisma.grafikBerdasarkanUmur.count({
+           where: { isActive: true }
+         })
+       ]);
+   
+       const totalPages = Math.ceil(total / limit);
+   
+       return {
+         success: true,
+         message: "Success fetch grafik berdasarkan umur with pagination",
+         data,
+         page,
+         totalPages,
+         total,
+       };
+     } catch (e) {
+       console.error("Find many paginated error:", e);
+       return {
+         success: false,
+         message: "Failed fetch grafik berdasarkan umur with pagination",
+         data: [],
+         page: 1,
+         totalPages: 1,
+         total: 0,
+       };
+     }
 }

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

@@ -1,9 +1,9 @@
 import Elysia, { t } from "elysia";
-import { grafikBerdasarkanUmurFindMany } from "./find-many";
 import { grafikBerdasarkanUmurCreate } from "./create";
 import grafikBerdasarakanUmurUpdate from "./update";
 import grafikBerdasarakanUmurFindById from "./find-by-id";
 import grafikBerdasarkanUmurDelete from "./del";
+import grafikBerdasarkanUmurFindMany from "./find-many";
 
 const GrafikBerdasarkanUmur = new Elysia({
   prefix: "/grafikberdasarkanumur",

src/app/api/[[...slugs]]/_lib/ppid/ikm/grafik_hasil_kepuasan_masyarakat/find-many.ts

@@ -1,8 +1,44 @@
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function grafikHasilKepuasanMasyarakatFindMany() {
+// Di findMany.ts
-  const res = await prisma.indeksKepuasanMasyarakat.findMany();
+export default async function grafikHasilKepuasanMasyarakatFindMany(context: Context) {
-  return {
+  const page = Number(context.query.page) || 1;
-    data: res,
+  const limit = Number(context.query.limit) || 10;
-  };
+  const skip = (page - 1) * limit;
-}
+
+  try {
+    const [data, total] = await Promise.all([
+      prisma.indeksKepuasanMasyarakat.findMany({
+        where: { isActive: true },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.indeksKepuasanMasyarakat.count({
+        where: { isActive: true }
+      })
+    ]);
+
+    const totalPages = Math.ceil(total / limit);
+
+    return {
+      success: true,
+      message: "Success fetch grafik hasil kepuasan masyarakat with pagination",
+      data,
+      page,
+      totalPages,
+      total,
+    };
+  } catch (e) {
+    console.error("Find many paginated error:", e);
+    return {
+      success: false,
+      message: "Failed fetch grafik hasil kepuasan masyarakat with pagination",
+      data: [],
+      page: 1,
+      totalPages: 1,
+      total: 0,
+    };
+  }
+}

src/app/api/[[...slugs]]/_lib/ppid/ikm/grafik_responden/find-many.ts

@@ -1,8 +1,43 @@
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function grafikRespondenFindMany(){
+export default async function grafikRespondenFindMany(context: Context){
-    const res = await prisma.grafikBerdasarkanResponden.findMany();
+      const page = Number(context.query.page) || 1;
-    return{
+      const limit = Number(context.query.limit) || 10;
-        data: res
+      const skip = (page - 1) * limit;
-    }
+    
+      try {
+        const [data, total] = await Promise.all([
+          prisma.grafikBerdasarkanResponden.findMany({
+            where: { isActive: true },
+            skip,
+            take: limit,
+            orderBy: { createdAt: 'desc' },
+          }),
+          prisma.grafikBerdasarkanResponden.count({
+            where: { isActive: true }
+          })
+        ]);
+    
+        const totalPages = Math.ceil(total / limit);
+    
+        return {
+          success: true,
+          message: "Success fetch grafik berdasarkan responden with pagination",
+          data,
+          page,
+          totalPages,
+          total,
+        };
+      } catch (e) {
+        console.error("Find many paginated error:", e);
+        return {
+          success: false,
+          message: "Failed fetch grafik berdasarkan responden with pagination",
+          data: [],
+          page: 1,
+          totalPages: 1,
+          total: 0,
+        };
+      }
 }