Menerapkan pagination di submenu pegawai & berita

2025-07-10 10:46:58 +08:00
parent 7b2b306849
commit 2bc9b2f3c6
6 changed files with 566 additions and 400 deletions
--- a/src/app/admin/(dashboard)/_state/desa/berita.ts
+++ b/src/app/admin/(dashboard)/_state/desa/berita.ts
@@ -80,13 +80,33 @@ const berita = proxy({
          };
        }>[]
      | null,
-    async load() {
-      const res = await ApiFetch.api.desa.berita["find-many"].get();
-      if (res.status === 200) {
-        berita.findMany.data = (res.data?.data ) ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+  
+    async load(page = 1, limit = 10) {
+      berita.findMany.loading = true;
+      berita.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.desa.berita["find-many"].get({
+          query: {
+            page,
+            limit,
+          },
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          berita.findMany.data = res.data.data ?? [];
+          berita.findMany.totalPages = res.data.totalPages ?? 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch berita paginated:", err);
+      } finally {
+        berita.findMany.loading = false;
      }
    },
  },
+  
  findUnique: {
    data: null as
      | Prisma.BeritaGetPayload<{
--- a/src/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi.ts
+++ b/src/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi.ts
@@ -30,9 +30,9 @@ const posisiOrganisasi = proxy({

      try {
        this.loading = true;
-        const res = await ApiFetch.api.ekonomi["struktur-organisasi"]["posisi-organisasi"]["create"].post(
-          this.form
-        );
+        const res = await ApiFetch.api.ekonomi["struktur-organisasi"][
+          "posisi-organisasi"
+        ]["create"].post(this.form);
        if (res.status === 200) {
          toast.success("Berhasil menambahkan posisi organisasi");
          posisiOrganisasi.findMany.load();
@@ -62,12 +62,15 @@ const posisiOrganisasi = proxy({
        return null;
      }
      try {
-        const response = await fetch(`/api/ekonomi/struktur-organisasi/posisi-organisasi/${id}`, {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
+        const response = await fetch(
+          `/api/ekonomi/struktur-organisasi/posisi-organisasi/${id}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
@@ -160,7 +163,9 @@ const posisiOrganisasi = proxy({
    }>,
    async load() {
      try {
-        const res = await ApiFetch.api.ekonomi["struktur-organisasi"]["posisi-organisasi"]["find-many"].get();
+        const res = await ApiFetch.api.ekonomi["struktur-organisasi"][
+          "posisi-organisasi"
+        ]["find-many"].get();
        if (res.status === 200) {
          // The API now returns the id field, so we can use it directly
          this.data = res.data?.data ?? [];
@@ -209,238 +214,278 @@ const posisiOrganisasi = proxy({
 });

 const templatePegawai = z.object({
-    namaLengkap: z.string().min(1, "Nama wajib diisi"),
-    gelarAkademik: z.string().optional(),
-    imageId: z.string().nullable().optional(),
-    tanggalMasuk: z.string().optional(), // ISO format
-    email: z.string().email("Email tidak valid").optional(),
-    telepon: z.string().optional(),
-    alamat: z.string().optional(),
-    posisiId: z.string().min(1, "Posisi wajib diisi"),
-    isActive: z.boolean().default(true),
-  });
-  
-  const pegawaiDefaultForm = {
-    namaLengkap: "",
-    gelarAkademik: "",
-    imageId: "",
-    tanggalMasuk: "",
-    email: "",
-    telepon: "",
-    alamat: "",
-    posisiId: "",
-    isActive: true,
-  };
-  
-  const pegawai = proxy({
-    create: {
-      form: { ...pegawaiDefaultForm },
-      loading: false,
-      async submit() {
-        const cek = templatePegawai.safeParse(pegawai.create.form);
-        if (!cek.success) {
-          const err = cek.error.issues.map(i => i.message).join("\n");
-          toast.error(err);
-          return;
-        }
-  
-        try {
-          pegawai.create.loading = true;
-          const res = await ApiFetch.api.ekonomi["struktur-organisasi"]["pegawai"]["create"].post(
-            pegawai.create.form
-          );
-          if (res.status === 200) {
-            toast.success("Pegawai berhasil ditambahkan");
-            await pegawai.findMany.load();
-          } else {
-            toast.error(res.data?.message ?? "Gagal tambah pegawai");
-          }
-        } catch (error) {
-          console.error("Gagal create:", error);
-          toast.error("Terjadi kesalahan saat menambahkan pegawai");
-        } finally {
-          pegawai.create.loading = false;
-        }
-      },
-    },
-    findMany: {
-      data: null as (Prisma.PegawaiGetPayload<{ include: { posisi: true, image: true } }> & { isActive: boolean })[] | null,
-      async load() {
-        try {
-          const res = await ApiFetch.api.ekonomi["struktur-organisasi"]["pegawai"]["find-many"].get();
-          if (res.status === 200) {
-            pegawai.findMany.data = (res.data?.data ?? []).map((item: any) => ({
-              ...item,
-              posisi: item.posisi || { id: '', nama: '' }, // Ensure posisi exists with required fields
-              isActive: item.isActive ?? true // Default to true if not provided
-            }));
-          } else {
-            console.error('Failed to load pegawai:', res.data?.message);
-          }
-        } catch (error) {
-          console.error('Error loading pegawai:', error);
-          pegawai.findMany.data = [];
-        }
-      },
-    },
-    findUnique: {
-      data: null as (Prisma.PegawaiGetPayload<{ include: { posisi: true, image: true } }> & { isActive: boolean }) | null,
-      async load(id: string) {
-        const res = await fetch(`/api/ekonomi/struktur-organisasi/pegawai/${id}`);
-        if (res.ok) {
-          const json = await res.json();
-          pegawai.findUnique.data = json.data ? {
-            ...json.data,
-            isActive: json.data.isActive ?? json.data.aktif ?? true // Fallback ke aktif:true jika tidak ada data
-          } : null;
-        } else {
-          pegawai.findUnique.data = null;
-        }
-      },
-    },
-  
-    delete: {
-      loading: false,
-      async byId(id: string) {
-        if (!id) return toast.warn("ID tidak valid");
-        try {
-          pegawai.delete.loading = true;
-          const res = await fetch(`/api/ekonomi/struktur-organisasi/pegawai/del/${id}`, {
-            method: "DELETE",
-          });
-          const json = await res.json();
-          if (res.ok) {
-            toast.success(json.message ?? "Berhasil hapus pegawai");
-            await pegawai.findMany.load();
-          } else {
-            toast.error(json.message ?? "Gagal hapus pegawai");
-          }
-        } catch (error) {
-          console.error("Gagal delete:", error);
-          toast.error("Terjadi kesalahan saat menghapus");
-        } finally {
-          pegawai.delete.loading = false;
-        }
-      },
-    },
-  
-     edit: {
-       id: "",
-       form: { ...pegawaiDefaultForm },
-       loading: false,
-   
-       async load(id: string) {
-         if (!id) {
-           toast.warn("ID tidak valid");
-           return null;
-         }
-         
-         try {
-           const response = await fetch(`/api/ekonomi/struktur-organisasi/pegawai/${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 = {
-               namaLengkap: data.namaLengkap,
-               gelarAkademik: data.gelarAkademik,
-               imageId: data.imageId,
-               tanggalMasuk: data.tanggalMasuk,
-               email: data.email,
-               telepon: data.telepon,
-               alamat: data.alamat,
-               posisiId: data.posisiId,
-               isActive: data.isActive,
-             };
-             return data; // Return the loaded data
-           } else {
-             throw new Error(result?.message || "Gagal memuat data");
-           }
-         } catch (error) {
-           console.error("Error loading berita:", error);
-           toast.error(error instanceof Error ? error.message : "Gagal memuat data");
-           return null;
-         }
-       },
-   
-       async submit() {
-         const cek = templatePegawai.safeParse(pegawai.edit.form);
-         if (!cek.success) {
-           const err = `[${cek.error.issues
-             .map((v) => `${v.path.join(".")}`)
-             .join("\n")}] required`;
-           toast.error(err);
-           return false;
-         }
-       
-         try {
-           pegawai.edit.loading = true;
-           
-           // Format tanggalMasuk to ISO string if it exists
-           const formattedTanggalMasuk = this.form.tanggalMasuk 
-             ? new Date(this.form.tanggalMasuk).toISOString()
-             : undefined;
-             
-           const response = await fetch(`/api/ekonomi/struktur-organisasi/pegawai/${this.id}`, {
-             method: 'PUT',
-             headers: {
-               'Content-Type': 'application/json',
-             },
-             body: JSON.stringify({
-               id: this.id,
-               namaLengkap: this.form.namaLengkap,
-               gelarAkademik: this.form.gelarAkademik,
-               imageId: this.form.imageId || null,
-               tanggalMasuk: formattedTanggalMasuk,
-               email: this.form.email,
-               telepon: this.form.telepon,
-               alamat: this.form.alamat,
-               posisiId: this.form.posisiId,
-               isActive: this.form.isActive,
-             }),
-           });
-           
-           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 pegawai");
-             await pegawai.findMany.load(); // refresh list
-             return true;
-           } else {
-             throw new Error(result.message || "Gagal update pegawai");
-           }
-         } catch (error) {
-           console.error("Error updating pegawai:", error);
-           toast.error(error instanceof Error ? error.message : "Terjadi kesalahan saat update pegawai");
-           return false;
-         } finally {
-           pegawai.edit.loading = false;
-         }
-       },
-   
-       reset() {
-         pegawai.edit.id = "";
-         pegawai.edit.form = { ...pegawaiDefaultForm };
-       },
-     },
-  });
+  namaLengkap: z.string().min(1, "Nama wajib diisi"),
+  gelarAkademik: z.string().optional(),
+  imageId: z.string().nullable().optional(),
+  tanggalMasuk: z.string().optional(), // ISO format
+  email: z.string().email("Email tidak valid").optional(),
+  telepon: z.string().optional(),
+  alamat: z.string().optional(),
+  posisiId: z.string().min(1, "Posisi wajib diisi"),
+  isActive: z.boolean().default(true),
+});

+const pegawaiDefaultForm = {
+  namaLengkap: "",
+  gelarAkademik: "",
+  imageId: "",
+  tanggalMasuk: "",
+  email: "",
+  telepon: "",
+  alamat: "",
+  posisiId: "",
+  isActive: true,
+};
+
+const pegawai = proxy({
+  create: {
+    form: { ...pegawaiDefaultForm },
+    loading: false,
+    async submit() {
+      const cek = templatePegawai.safeParse(pegawai.create.form);
+      if (!cek.success) {
+        const err = cek.error.issues.map((i) => i.message).join("\n");
+        toast.error(err);
+        return;
+      }
+
+      try {
+        pegawai.create.loading = true;
+        const res = await ApiFetch.api.ekonomi["struktur-organisasi"][
+          "pegawai"
+        ]["create"].post(pegawai.create.form);
+        if (res.status === 200) {
+          toast.success("Pegawai berhasil ditambahkan");
+          await pegawai.findMany.load();
+        } else {
+          toast.error(res.data?.message ?? "Gagal tambah pegawai");
+        }
+      } catch (error) {
+        console.error("Gagal create:", error);
+        toast.error("Terjadi kesalahan saat menambahkan pegawai");
+      } finally {
+        pegawai.create.loading = false;
+      }
+    },
+  },
+
+  // In struktur-organisasi.ts
+findMany: {
+  data: null as any[] | null,
+  page: 1,
+  totalPages: 1,
+  total: 0,
+  loading: false,
+  load: async (page = 1, limit = 10) => {  // Change to arrow function
+    pegawai.findMany.loading = true;  // Use the full path to access the property
+    pegawai.findMany.page = page;
+    try {
+      const res = await ApiFetch.api.ekonomi["struktur-organisasi"][
+        "pegawai"
+      ]["find-many"].get({
+        query: { page, limit },
+      });
+
+      if (res.status === 200 && res.data?.success) {
+        pegawai.findMany.data = res.data.data || [];
+        pegawai.findMany.total = res.data.total || 0;
+        pegawai.findMany.totalPages = res.data.totalPages || 1;
+      } else {
+        console.error("Failed to load pegawai:", res.data?.message);
+        pegawai.findMany.data = [];
+        pegawai.findMany.total = 0;
+        pegawai.findMany.totalPages = 1;
+      }
+    } catch (error) {
+      console.error("Error loading pegawai:", error);
+      pegawai.findMany.data = [];
+      pegawai.findMany.total = 0;
+      pegawai.findMany.totalPages = 1;
+    } finally {
+      pegawai.findMany.loading = false;
+    }
+  },
+},
+  findUnique: {
+    data: null as
+      | (Prisma.PegawaiGetPayload<{
+          include: { posisi: true; image: true };
+        }> & { isActive: boolean })
+      | null,
+    async load(id: string) {
+      const res = await fetch(`/api/ekonomi/struktur-organisasi/pegawai/${id}`);
+      if (res.ok) {
+        const json = await res.json();
+        pegawai.findUnique.data = json.data
+          ? {
+              ...json.data,
+              isActive: json.data.isActive ?? json.data.aktif ?? true, // Fallback ke aktif:true jika tidak ada data
+            }
+          : null;
+      } else {
+        pegawai.findUnique.data = null;
+      }
+    },
+  },
+
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+      try {
+        pegawai.delete.loading = true;
+        const res = await fetch(
+          `/api/ekonomi/struktur-organisasi/pegawai/del/${id}`,
+          {
+            method: "DELETE",
+          }
+        );
+        const json = await res.json();
+        if (res.ok) {
+          toast.success(json.message ?? "Berhasil hapus pegawai");
+          await pegawai.findMany.load();
+        } else {
+          toast.error(json.message ?? "Gagal hapus pegawai");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus");
+      } finally {
+        pegawai.delete.loading = false;
+      }
+    },
+  },
+
+  edit: {
+    id: "",
+    form: { ...pegawaiDefaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(
+          `/api/ekonomi/struktur-organisasi/pegawai/${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 = {
+            namaLengkap: data.namaLengkap,
+            gelarAkademik: data.gelarAkademik,
+            imageId: data.imageId,
+            tanggalMasuk: data.tanggalMasuk,
+            email: data.email,
+            telepon: data.telepon,
+            alamat: data.alamat,
+            posisiId: data.posisiId,
+            isActive: data.isActive,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading berita:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async submit() {
+      const cek = templatePegawai.safeParse(pegawai.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        pegawai.edit.loading = true;
+
+        // Format tanggalMasuk to ISO string if it exists
+        const formattedTanggalMasuk = this.form.tanggalMasuk
+          ? new Date(this.form.tanggalMasuk).toISOString()
+          : undefined;
+
+        const response = await fetch(
+          `/api/ekonomi/struktur-organisasi/pegawai/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              id: this.id,
+              namaLengkap: this.form.namaLengkap,
+              gelarAkademik: this.form.gelarAkademik,
+              imageId: this.form.imageId || null,
+              tanggalMasuk: formattedTanggalMasuk,
+              email: this.form.email,
+              telepon: this.form.telepon,
+              alamat: this.form.alamat,
+              posisiId: this.form.posisiId,
+              isActive: this.form.isActive,
+            }),
+          }
+        );
+
+        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 pegawai");
+          await pegawai.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update pegawai");
+        }
+      } catch (error) {
+        console.error("Error updating pegawai:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update pegawai"
+        );
+        return false;
+      } finally {
+        pegawai.edit.loading = false;
+      }
+    },
+
+    reset() {
+      pegawai.edit.id = "";
+      pegawai.edit.form = { ...pegawaiDefaultForm };
+    },
+  },
+});

 // Schema Zod untuk form validasi
 const templateHubunganOrganisasiForm = z.object({
@@ -474,7 +519,9 @@ const hubunganOrganisasi = proxy({

      try {
        hubunganOrganisasi.create.loading = true;
-        const res = await ApiFetch.api.ekonomi["struktur-organisasi"]["hubungan-organisasi"]["create"].post(hubunganOrganisasi.create.form);
+        const res = await ApiFetch.api.ekonomi["struktur-organisasi"][
+          "hubungan-organisasi"
+        ]["create"].post(hubunganOrganisasi.create.form);

        if (res.status === 200 && res.data?.success) {
          hubunganOrganisasi.findMany.load();
@@ -482,7 +529,7 @@ const hubunganOrganisasi = proxy({
        } else {
          return toast.error(res.data?.message || "Gagal menambahkan data");
        }
-      } catch (error) { 
+      } catch (error) {
        console.error("Gagal create:", error);
        toast.error("Terjadi kesalahan saat menambahkan");
      } finally {
@@ -490,7 +537,7 @@ const hubunganOrganisasi = proxy({
      }
    },
  },
-  findMany: {   
+  findMany: {
    data: null as Array<{
      id: string;
      atasanId: string;
@@ -528,20 +575,29 @@ const hubunganOrganisasi = proxy({

    async load() {
      try {
-        const res = await ApiFetch.api.ekonomi["struktur-organisasi"]["hubungan-organisasi"]["find-many"].get();
+        const res = await ApiFetch.api.ekonomi["struktur-organisasi"][
+          "hubungan-organisasi"
+        ]["find-many"].get();

        if (res.status === 200) {
-          hubunganOrganisasi.findMany.data = (res.data?.data ?? []).map((item: any) => ({
-            ...item,
-            atasan: item.atasan ? {
-              ...item.atasan,
-              isActive: item.atasan.isActive ?? item.atasan.aktif ?? true
-            } : null,
-            bawahan: item.bawahan ? {
-              ...item.bawahan,
-              isActive: item.bawahan.isActive ?? item.bawahan.aktif ?? true
-            } : null
-          }));
+          hubunganOrganisasi.findMany.data = (res.data?.data ?? []).map(
+            (item: any) => ({
+              ...item,
+              atasan: item.atasan
+                ? {
+                    ...item.atasan,
+                    isActive: item.atasan.isActive ?? item.atasan.aktif ?? true,
+                  }
+                : null,
+              bawahan: item.bawahan
+                ? {
+                    ...item.bawahan,
+                    isActive:
+                      item.bawahan.isActive ?? item.bawahan.aktif ?? true,
+                  }
+                : null,
+            })
+          );
        } else {
          hubunganOrganisasi.findMany.data = [];
        }
@@ -591,7 +647,9 @@ const hubunganOrganisasi = proxy({

    async load(id: string) {
      try {
-        const res = await fetch(`/api/ekonomi/struktur-organisasi/hubungan-organisasi/${id}`);
+        const res = await fetch(
+          `/api/ekonomi/struktur-organisasi/hubungan-organisasi/${id}`
+        );
        const result = await res.json();

        if (res.ok && result?.success) {
@@ -616,7 +674,9 @@ const hubunganOrganisasi = proxy({
      if (!id) return toast.warn("ID tidak valid");

      try {
-        const res = await fetch(`/api/ekonomi/struktur-organisasi/hubungan-organisasi/${id}`);
+        const res = await fetch(
+          `/api/ekonomi/struktur-organisasi/hubungan-organisasi/${id}`
+        );
        const result = await res.json();

        if (res.ok && result?.success) {
@@ -633,7 +693,9 @@ const hubunganOrganisasi = proxy({
        }
      } catch (error) {
        console.error("Error loading:", error);
-        toast.error(error instanceof Error ? error.message : "Gagal memuat data");
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
        return null;
      }
    },
@@ -690,9 +752,12 @@ const hubunganOrganisasi = proxy({

      try {
        hubunganOrganisasi.delete.loading = true;
-        const res = await fetch(`/api/ekonomi/struktur-organisasi/hubungan-organisasi/del/${id}`, {
-          method: "DELETE",
-        });
+        const res = await fetch(
+          `/api/ekonomi/struktur-organisasi/hubungan-organisasi/del/${id}`,
+          {
+            method: "DELETE",
+          }
+        );

        const result = await res.json();
        if (res.ok && result?.success) {
--- a/src/app/admin/(dashboard)/desa/berita/page.tsx
+++ b/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, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, 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';
@@ -29,12 +29,21 @@ function Berita() {
 function ListBerita({ search }: { search: string }) {
  const beritaState = useProxy(stateDashboardBerita)
  const router = useRouter()
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = beritaState.berita.findMany;

+
+  // Fetch pertama kali
  useShallowEffect(() => {
-    beritaState.berita.findMany.load()
-  }, [])
+    load(page); // awal page = 1
+  }, []);

-  const filteredData = (beritaState.berita.findMany.data || []).filter(item => {
+  const filteredData = (data || []).filter((item) => {
    const keyword = search.toLowerCase();
    return (
      item.judul.toLowerCase().includes(keyword) ||
@@ -42,67 +51,84 @@ function ListBerita({ search }: { search: string }) {
    );
  });

-
-  if (!beritaState.berita.findMany.data) {
-    return (
-      <Stack py={10}>
-        <Skeleton h={500} />
-      </Stack>
-    )
+  if (loading || !data) {
+    return <Skeleton h={500} />;
  }

  return (
    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
+      <Pagination
+        value={page}
+        onChange={(newPage) => load(newPage)} // ini penting!
+        total={totalPages}
+        mt="md"
+        mb="md"
+      />
+
+      <Paper bg={colors["white-1"]} p={"md"}>
        <Stack>
          <Grid>
            <GridCol span={{ base: 12, md: 11 }}>
-              <Text fz={"xl"} fw={"bold"}>List Berita</Text>
+              <Text fz={"xl"} fw={"bold"}>
+                List Berita
+              </Text>
            </GridCol>
            <GridCol span={{ base: 12, md: 1 }}>
-              <Button onClick={() => router.push("/admin/desa/berita/create")} bg={colors['blue-button']}>
+              <Button
+                onClick={() => router.push("/admin/desa/berita/create")}
+                bg={colors["blue-button"]}
+              >
                <IconCircleDashedPlus size={25} />
              </Button>
            </GridCol>
          </Grid>
          <Box style={{ overflowX: "auto" }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+            <Table
+              striped
+              withRowBorders
+              withTableBorder
+              style={{ minWidth: "700px" }}
+            >
              <TableThead>
                <TableTr>
                  <TableTh w={250}>Judul</TableTh>
                  <TableTh w={250}>Kategori</TableTh>
                  <TableTh w={250}>Image</TableTh>
                  <TableTh w={200}>Detail</TableTh>
-
                </TableTr>
              </TableThead>
-              <TableTbody >
+              <TableTbody>
                {filteredData.map((item) => (
                  <TableTr key={item.id}>
-                    <TableTd >
+                    <TableTd>
                      <Box w={100}>
-                        <Text truncate="end" fz={"sm"}>{item.judul}</Text>
+                        <Text truncate="end" fz={"sm"}>
+                          {item.judul}
+                        </Text>
                      </Box>
                    </TableTd>
-                    <TableTd >{item.kategoriBerita?.name}</TableTd>
+                    <TableTd>{item.kategoriBerita?.name}</TableTd>
                    <TableTd>
                      <Image w={100} src={item.image?.link} alt="gambar" />
                    </TableTd>
                    <TableTd>
-                      <Button bg={"green"} onClick={() => router.push(`/admin/desa/berita/${item.id}`)}>
+                      <Button
+                        bg={"green"}
+                        onClick={() =>
+                          router.push(`/admin/desa/berita/${item.id}`)
+                        }
+                      >
                        <IconDeviceImacCog size={25} />
                      </Button>
                    </TableTd>
-
                  </TableTr>
                ))}
              </TableTbody>
-            </Table> </Box>
+            </Table>
+          </Box>
        </Stack>
      </Paper>
-
    </Box>
-  )
+  );
 }
-
 export default Berita;
--- a/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/page.tsx
@@ -1,10 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Badge, Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { Badge, Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, ThemeIcon } from '@mantine/core';
+import { IconCheck, IconDeviceImacCog, IconSearch, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import JudulList from '../../../_com/judulList';
@@ -30,46 +30,33 @@ function ListPegawai({ search }: { search: string }) {
  const stateOrganisasi = useProxy(strukturorganisasiState.pegawai);
  const router = useRouter();

+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = stateOrganisasi.findMany;
+
  useEffect(() => {
-    const loadData = async () => {
-      try {
-        // Clear existing data to ensure we see the loading state
-        stateOrganisasi.findMany.data = [];
+    load(page, 10);
+  }, [page]);

-        // Load new data
-        await stateOrganisasi.findMany.load();
-
-        // Type guard to ensure data is an array
-        const data = stateOrganisasi.findMany.data || [];
-        if (data.length > 0) {
-          console.log('4. First record sample:', data[0]);
-        }
-      } catch (error) {
-        console.error('Error loading pegawai data:', error);
-        stateOrganisasi.findMany.data = [];
-      }
-    };
-
-    loadData();
-
-    // Cleanup function
-    return () => {
-      console.log('Cleanup: Unmounting component');
-    };
-  }, []);
-
-  const filteredData = (stateOrganisasi.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.namaLengkap?.toLowerCase().includes(keyword) ||
-      item.gelarAkademik?.toLowerCase().includes(keyword) ||
-      item.telepon?.toLowerCase().includes(keyword) ||
-      item.posisi?.nama?.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = useMemo(() => {
+    if (!data) return [];
+    return data.filter(item => {
+      const keyword = search.toLowerCase();
+      return (
+        item.namaLengkap?.toLowerCase().includes(keyword) ||
+        item.gelarAkademik?.toLowerCase().includes(keyword) ||
+        item.telepon?.toLowerCase().includes(keyword) ||
+        item.posisi?.nama?.toLowerCase().includes(keyword)
+      );
+    });
+  }, [data, search]); 

  // Handle loading state
-  if (stateOrganisasi.findMany.data === null) {
+  if (loading || !data) {
    return (
      <Stack py={10}>
        <Skeleton height={300} />
@@ -77,8 +64,6 @@ function ListPegawai({ search }: { search: string }) {
    );
  }

-  // Check if data is an empty array
-  const data = stateOrganisasi.findMany.data || [];
  if (data.length === 0) {
    return (
      <Box py={10}>
@@ -95,48 +80,79 @@ function ListPegawai({ search }: { search: string }) {
          title='List Pegawai'
          href='/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/create'
        />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Nama</TableTh>
-              <TableTh>Gelar Akademik</TableTh>
-              <TableTh>Telepon</TableTh>
-              <TableTh>Posisi</TableTh>
-              <TableTh>Aktif</TableTh>
-              <TableTh>Detail</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            {(() => {
-              console.log('Rendering table with items:', stateOrganisasi.findMany.data);
-              return null;
-            })()}
-            {([...filteredData]
-              .sort((a, b) => {
-                if (a.isActive === b.isActive) {
-                  return a.namaLengkap.localeCompare(b.namaLengkap); // kalau status sama, urut nama
-                }
-                return Number(b.isActive) - Number(a.isActive); // aktif duluan
-              }) // Aktif di atas
-            ).map((item) => (
-              <TableTr key={item.id}>
-                <TableTd>{item.namaLengkap}</TableTd>
-                <TableTd>{item.gelarAkademik}</TableTd>
-                <TableTd>{item.telepon}</TableTd>
-                <TableTd>{item.posisi?.nama}</TableTd>
-                <TableTd>
-                  <Badge color={item.isActive ? "green" : "red"}>{item.isActive ? "Aktif" : "Tidak Aktif"}</Badge>
-                </TableTd>
-                <TableTd>
-                  <Button bg={"green"} onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/${item.id}`)}>
-                    <IconDeviceImacCog size={25} />
-                  </Button>
-                </TableTd>
+        <Box style={{ overflowX: "auto" }}>
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh>Nama</TableTh>
+                <TableTh>Gelar Akademik</TableTh>
+                <TableTh>Telepon</TableTh>
+                <TableTh>Posisi</TableTh>
+                <TableTh>Aktif</TableTh>
+                <TableTh>Detail</TableTh>
              </TableTr>
-            ))}
-          </TableTbody>
-        </Table>
+            </TableThead>
+            <TableTbody>
+              {(() => {
+                console.log('Rendering table with items:', stateOrganisasi.findMany.data);
+                return null;
+              })()}
+              {([...filteredData]
+                .sort((a, b) => {
+                  if (a.isActive === b.isActive) {
+                    return a.namaLengkap.localeCompare(b.namaLengkap); // kalau status sama, urut nama
+                  }
+                  return Number(b.isActive) - Number(a.isActive); // aktif duluan
+                }) // Aktif di atas
+              ).map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd>{item.namaLengkap}</TableTd>
+                  <TableTd>{item.gelarAkademik}</TableTd>
+                  <TableTd>{item.telepon}</TableTd>
+                  <TableTd>{item.posisi?.nama}</TableTd>
+                  <TableTd>
+                    <Group gap="xs" wrap="nowrap">
+                      <Box visibleFrom="sm">
+                        <Badge color={item.isActive ? "green" : "red"}>
+                          {item.isActive ? "Aktif" : "Tidak Aktif"}
+                        </Badge>
+                      </Box>
+                      <Box hiddenFrom="sm">
+                        {item.isActive ? (
+                          <ThemeIcon color="green" variant="light" size="sm">
+                            <IconCheck size={16} />
+                          </ThemeIcon>
+                        ) : (
+                          <ThemeIcon color="red" variant="light" size="sm">
+                            <IconX size={16} />
+                          </ThemeIcon>
+                        )}
+                      </Box>
+                    </Group>
+                  </TableTd>
+                  <TableTd>
+                    <Button bg={"green"} onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/${item.id}`)}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        </Box>
      </Paper>
+     <Center>
+     <Pagination
+        value={page}
+        onChange={(newPage) => {
+          load(newPage, 10);
+          window.scrollTo(0, 0); 
+        }}
+        total={totalPages}
+        mt="md"
+        mb="md"
+      />
+     </Center>
    </Box>
  );
 }
--- a/src/app/api/[[...slugs]]/_lib/desa/berita/find-many.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/berita/find-many.ts
@@ -1,27 +1,44 @@
+// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+async function beritaFindManyPaginated(context: Context) {
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const skip = (page - 1) * limit;

-async function beritaFindMany() {
  try {
-    const data = await prisma.berita.findMany({
-      where: { isActive: true },
-      include: {
-        image: true,
-        kategoriBerita: true,
-      },
-    });
+    const [data, total] = await Promise.all([
+      prisma.berita.findMany({
+        where: { isActive: true },
+        include: {
+          image: true,
+          kategoriBerita: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' }, // opsional, kalau mau urut berdasarkan waktu
+      }),
+      prisma.berita.count({
+        where: { isActive: true }
+      })
+    ]);

    return {
      success: true,
-      message: "Success fetch berita",
+      message: "Success fetch berita with pagination",
      data,
+      page,
+      totalPages: Math.ceil(total / limit),
+      total,
    };
  } catch (e) {
-    console.error("Find many error:", e);
+    console.error("Find many paginated error:", e);
    return {
      success: false,
-      message: "Failed fetch berita",
+      message: "Failed fetch berita with pagination",
    };
  }
 }

-export default beritaFindMany;
+export default beritaFindManyPaginated;
--- a/src/app/api/[[...slugs]]/_lib/ekonomi/struktur-organisasi/pegawai/findMany.ts
+++ b/src/app/api/[[...slugs]]/_lib/ekonomi/struktur-organisasi/pegawai/findMany.ts
@@ -1,26 +1,48 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+// Di findMany.ts
+export default async function pegawaiFindMany(context: Context) {
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const skip = (page - 1) * limit;

-export default async function pegawaiFindMany() {
  try {
-    const pegawaiList = await prisma.pegawai.findMany({
-      orderBy: { createdAt: "desc" },
-      include: {
-        posisi: true,
-        image: true,
-      },
-    });
+    const [data, total] = await Promise.all([
+      prisma.pegawai.findMany({
+        where: { isActive: true },
+        include: {
+          posisi: true,
+          image: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.pegawai.count({
+        where: { isActive: true }
+      })
+    ]);
+
+    const totalPages = Math.ceil(total / limit);

    return {
      success: true,
-      data: pegawaiList,
+      message: "Success fetch pegawai with pagination",
+      data,
+      page,
+      totalPages,
+      total,
    };
-  } catch (error: any) {
-    console.error("Error findMany pegawai:", error);
+  } catch (e) {
+    console.error("Find many paginated error:", e);
    return {
      success: false,
-      message: "Gagal mengambil data pegawai",
-      error: error.message,
+      message: "Failed fetch pegawai with pagination",
+      data: [],
+      page: 1,
+      totalPages: 1,
+      total: 0,
    };
  }
-}
+}