Sinkronisasi UI & API Admin - User Submenu Penanganan Darurat, User Submenu Kontak Darurat & User Submenu Info Wabah / Penyakit

2025-08-18 20:56:18 +08:00
parent 1e154ced86
commit 4491d23bea
14 changed files with 845 additions and 636 deletions
--- a/src/app/admin/(dashboard)/_state/kesehatan/info-wabah-penyakit/infoWabahPenyakit.ts
+++ b/src/app/admin/(dashboard)/_state/kesehatan/info-wabah-penyakit/infoWabahPenyakit.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";
@@ -20,17 +21,41 @@ const defaultForm = {

 const infoWabahPenyakit = proxy({
  findMany: {
-    data: [] as Prisma.InfoWabahPenyakitGetPayload<{
-      include: {
-        image: true;
-      };
-    }>[],
-    async load() {
-      const res = await ApiFetch.api.kesehatan.infowabahpenyakit[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        infoWabahPenyakit.findMany.data = res.data?.data ?? [];
+    data: null as
+      | Prisma.InfoWabahPenyakitGetPayload<{
+          include: {
+            image: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      infoWabahPenyakit.findMany.loading = true; // ✅ Akses langsung via nama path
+      infoWabahPenyakit.findMany.page = page;
+      infoWabahPenyakit.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.kesehatan.infowabahpenyakit["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+         infoWabahPenyakit.findMany.data = res.data.data ?? [];
+          infoWabahPenyakit.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          infoWabahPenyakit.findMany.data = [];
+          infoWabahPenyakit.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch info wabah penyakit paginated:", err);
+        infoWabahPenyakit.findMany.data = [];
+        infoWabahPenyakit.findMany.totalPages = 1;
+      } finally {
+        infoWabahPenyakit.findMany.loading = false;
      }
    },
  },
--- a/src/app/admin/(dashboard)/_state/kesehatan/kontak-darurat/kontakDarurat.ts
+++ b/src/app/admin/(dashboard)/_state/kesehatan/kontak-darurat/kontakDarurat.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";
@@ -5,204 +6,241 @@ import { proxy } from "valtio";
 import { z } from "zod";

 const templateForm = z.object({
-    name: z.string().min(3, "Judul minimal 3 karakter"),
-    deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
-    imageId: z.string().nonempty(),
-})
-
-const defaultForm = {
-    name: "",
-    deskripsi: "",
-    imageId: "",
-}
-
-const kontakDarurat = proxy({
-    findMany: {
-        data: [] as Prisma.KontakDaruratGetPayload<{
-            include: {
-                image: true;
-            };
-        }>[],
-        async load() {
-            const res = await ApiFetch.api.kesehatan.kontakdarurat[
-                "find-many"
-            ].get();
-            if (res.status === 200) {
-                kontakDarurat.findMany.data = res.data?.data ?? [];
-            }
-        },
-    },
-    create:{
-        form: {...defaultForm},
-        loading: false,
-        async create() {
-            const cek = templateForm.safeParse(kontakDarurat.create.form);
-            if (!cek.success) {
-                const err = `[${cek.error.issues
-                    .map((v) => `${v.path.join(".")}`)
-                    .join("\n")}] required`;
-                return toast.error(err);
-            }
-
-            try {
-                kontakDarurat.create.loading = true;
-                const res = await ApiFetch.api.kesehatan.kontakdarurat[
-                    "create"
-                ].post(kontakDarurat.create.form);
-                if (res.status === 200) {
-                    kontakDarurat.findMany.load();
-                    return toast.success("Kontak Darurat berhasil disimpan!");
-                }
-
-                return toast.error("Gagal menyimpan kontak darurat");
-            } catch (error) {
-                console.log((error as Error).message);
-            } finally {
-                kontakDarurat.create.loading = false;
-            }
-        },
-        resetForm() {
-            kontakDarurat.create.form = {...defaultForm};
-        }
-    },
-    findUnique: {
-        data: null as Prisma.KontakDaruratGetPayload<{
-            include: {
-                image: true;
-            };
-        }> | null,
-        async load(id: string) {
-           try {
-            const res = await fetch(`/api/kesehatan/kontakdarurat/${id}`);
-            if (res.ok) {
-                const data = await res.json();
-                kontakDarurat.findUnique.data = data.data ?? null;
-            } else {
-                console.error("Failed to fetch data", res.status, res.statusText);
-                kontakDarurat.findUnique.data = null;
-            }
-           } catch (error) {
-            console.error("Error fetching data:", error);
-            kontakDarurat.findUnique.data = null;
-           }
-        },
-    },
-    delete: {
-        loading: false,
-        async byId(id: string) {
-          try {
-            kontakDarurat.delete.loading = true;
-            const response = await fetch(`/api/kesehatan/kontakdarurat/del/${id}`, {
-              method: 'DELETE',
-              headers: {
-                'Content-Type': 'application/json',
-              },
-            });
-            
-            const result = await response.json();
-            
-            if (response.ok && result?.success) {
-              toast.success(result.message || "Kontak darurat berhasil dihapus");
-              await kontakDarurat.findMany.load(); // refresh list
-            } else {
-              toast.error(result?.message || "Gagal menghapus kontak darurat");
-            }
-          } catch (error) {
-            console.error("Gagal delete:", error);
-            toast.error("Terjadi kesalahan saat menghapus kontak darurat");
-          } finally {
-            kontakDarurat.delete.loading = false;
-          }
-        }
-      },
-    edit: {
-        id: "",
-        form: { ...defaultForm },
-        loading: false,
-    
-        async load(id: string) {
-          if (!id) {
-            toast.warn("ID tidak valid");
-            return null;
-          }
-    
-          try {
-            const response = await fetch(`/api/kesehatan/kontakdarurat/${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 = {
-                name: data.name,
-                deskripsi: data.deskripsi,
-                imageId: data.imageId,
-              };
-              return data; // Return the loaded data
-            } else {
-              throw new Error(result?.message || "Gagal memuat data");
-            }
-          } catch (error) {
-            console.error("Error fetching kontak darurat:", error);
-            toast.error(error instanceof Error ? error.message : "Gagal memuat data");
-            return null;
-          }
-        },
-    
-        async update() {
-            const cek = templateForm.safeParse(kontakDarurat.edit.form);
-            if (!cek.success) {
-                const err = `[${cek.error.issues
-                    .map((v) => `${v.path.join(".")}`)
-                    .join("\n")}] required`;
-                return toast.error(err);
-            }
-    
-            try {
-                kontakDarurat.edit.loading = true;
-                const response = await fetch(`/api/kesehatan/kontakdarurat/${this.id}`, {
-                    method: "PUT",
-                    headers: {
-                        "Content-Type": "application/json",
-                    },
-                    body: JSON.stringify({
-                        name: this.form.name,
-                        deskripsi: this.form.deskripsi,
-                        imageId: this.form.imageId,
-                    }),
-                });
-                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(result.message || "Kontak darurat berhasil diupdate");
-                    await kontakDarurat.findMany.load();  
-                    return true;
-                } else {
-                    throw new Error(result.message || "Gagal update kontak darurat");
-                }
-            } catch (error) {
-                console.error("Gagal update:", error);
-                toast.error(error instanceof Error ? error.message : "Terjadi kesalahan saat mengupdate kontak darurat");
-                return false;
-            } finally {
-                kontakDarurat.edit.loading = false;
-            }
-        },
-        reset() {
-            kontakDarurat.edit.id = "";
-            kontakDarurat.edit.form = { ...defaultForm };
-        },
-      },
+  name: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+  imageId: z.string().nonempty(),
 });

-export default kontakDarurat
+const defaultForm = {
+  name: "",
+  deskripsi: "",
+  imageId: "",
+};
+
+const kontakDarurat = proxy({
+  findMany: {
+    data: null as
+      | Prisma.KontakDaruratGetPayload<{
+          include: {
+            image: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      kontakDarurat.findMany.loading = true; // ✅ Akses langsung via nama path
+      kontakDarurat.findMany.page = page;
+      kontakDarurat.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.kesehatan.kontakdarurat[
+          "find-many"
+        ].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          kontakDarurat.findMany.data = res.data.data ?? [];
+          kontakDarurat.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          kontakDarurat.findMany.data = [];
+          kontakDarurat.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch kontak darurat paginated:", err);
+        kontakDarurat.findMany.data = [];
+        kontakDarurat.findMany.totalPages = 1;
+      } finally {
+        kontakDarurat.findMany.loading = false;
+      }
+    },
+  },
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(kontakDarurat.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        kontakDarurat.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.kontakdarurat["create"].post(
+          kontakDarurat.create.form
+        );
+        if (res.status === 200) {
+          kontakDarurat.findMany.load();
+          return toast.success("Kontak Darurat berhasil disimpan!");
+        }
+
+        return toast.error("Gagal menyimpan kontak darurat");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        kontakDarurat.create.loading = false;
+      }
+    },
+    resetForm() {
+      kontakDarurat.create.form = { ...defaultForm };
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KontakDaruratGetPayload<{
+      include: {
+        image: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/kesehatan/kontakdarurat/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          kontakDarurat.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          kontakDarurat.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        kontakDarurat.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      try {
+        kontakDarurat.delete.loading = true;
+        const response = await fetch(`/api/kesehatan/kontakdarurat/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Kontak darurat berhasil dihapus");
+          await kontakDarurat.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus kontak darurat");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus kontak darurat");
+      } finally {
+        kontakDarurat.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/kesehatan/kontakdarurat/${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 = {
+            name: data.name,
+            deskripsi: data.deskripsi,
+            imageId: data.imageId,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error fetching kontak darurat:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = templateForm.safeParse(kontakDarurat.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        kontakDarurat.edit.loading = true;
+        const response = await fetch(
+          `/api/kesehatan/kontakdarurat/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+              deskripsi: this.form.deskripsi,
+              imageId: this.form.imageId,
+            }),
+          }
+        );
+        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(result.message || "Kontak darurat berhasil diupdate");
+          await kontakDarurat.findMany.load();
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update kontak darurat");
+        }
+      } catch (error) {
+        console.error("Gagal update:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat mengupdate kontak darurat"
+        );
+        return false;
+      } finally {
+        kontakDarurat.edit.loading = false;
+      }
+    },
+    reset() {
+      kontakDarurat.edit.id = "";
+      kontakDarurat.edit.form = { ...defaultForm };
+    },
+  },
+});
+
+export default kontakDarurat;
--- a/src/app/admin/(dashboard)/_state/kesehatan/penanganan-darurat/penangananDarurat.ts
+++ b/src/app/admin/(dashboard)/_state/kesehatan/penanganan-darurat/penangananDarurat.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";
@@ -17,21 +18,45 @@ const defaultForm = {
 }

 const penangananDarurat = proxy({
-    findMany: {
-        data: [] as Prisma.PenangananDaruratGetPayload<{
-            include: {
-                image: true;
-            };
-        }>[],
-        async load() {
-            const res = await ApiFetch.api.kesehatan.penanganandarurat[
-                "find-many"
-            ].get();
-            if (res.status === 200) {
-                penangananDarurat.findMany.data = res.data?.data ?? [];
-            }
-        },
+  findMany: {
+    data: null as
+      | Prisma.PenangananDaruratGetPayload<{
+          include: {
+            image: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      penangananDarurat.findMany.loading = true; // ✅ Akses langsung via nama path
+      penangananDarurat.findMany.page = page;
+      penangananDarurat.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.kesehatan.penanganandarurat["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+         penangananDarurat.findMany.data = res.data.data ?? [];
+          penangananDarurat.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          penangananDarurat.findMany.data = [];
+          penangananDarurat.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch berita paginated:", err);
+        penangananDarurat.findMany.data = [];
+        penangananDarurat.findMany.totalPages = 1;
+      } finally {
+        penangananDarurat.findMany.loading = false;
+      }
    },
+  },
    create:{
        form: {...defaultForm},
        loading: false,
--- a/src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import JudulList from '../../_com/judulList';
 import HeaderSearch from '../../_com/header';
@@ -21,7 +21,7 @@ function InfoWabahPenyakit() {
        value={search}
        onChange={(e) => setSearch(e.currentTarget.value)}
      />
-      <ListInfoWabahPenyakit search={search}/>
+      <ListInfoWabahPenyakit search={search} />
    </Box>
  );
 }
@@ -30,19 +30,21 @@ function ListInfoWabahPenyakit({ search }: { search: string }) {
  const infoWabahPenyakitState = useProxy(infoWabahPenyakit)
  const router = useRouter()

+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = infoWabahPenyakitState.findMany;
+
  useShallowEffect(() => {
-    infoWabahPenyakitState.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])

-  const filteredData = (infoWabahPenyakitState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsiSingkat.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []

-  if (!infoWabahPenyakitState.findMany.data) {
+  if (loading || !data) {
    return (
      <Box py={10}>
        <Skeleton h={500} />
@@ -51,49 +53,60 @@ function ListInfoWabahPenyakit({ search }: { search: string }) {
  }
  return (
    <Box py={10}>
-    <Paper bg={colors['white-1']} p={'md'}>
-      <Stack>
-        <JudulList
-          title='List Info Wabah Penyakit'
-          href='/admin/kesehatan/info-wabah-penyakit/create'
-        />
-        <Box style={{ overflowX: "auto" }}>
-          <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-            <TableThead>
-              <TableTr>
-                <TableTh>Judul</TableTh>
-                <TableTh>Deskripsi Singkat</TableTh>
-                <TableTh>Image</TableTh>
-                <TableTh>Detail</TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              {filteredData.map((item) => (
-                <TableTr key={item.id}>
-                  <TableTd>
-                    <Box w={100}>
-                      <Text truncate="end" fz={"sm"}>{item.name}</Text>
-                    </Box>
-                  </TableTd>
-                  <TableTd>
-                    <Text truncate="end" fz={"sm"}>{item.deskripsiSingkat}</Text>
-                  </TableTd>
-                  <TableTd>
-                    <Image w={100} src={item.image?.link} alt="image" />
-                  </TableTd>
-                  <TableTd>
-                    <Button onClick={() => router.push(`/admin/kesehatan/info-wabah-penyakit/${item.id}`)}>
-                      <IconDeviceImacCog size={25} />
-                    </Button>
-                  </TableTd>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+            title='List Info Wabah Penyakit'
+            href='/admin/kesehatan/info-wabah-penyakit/create'
+          />
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Judul</TableTh>
+                  <TableTh>Deskripsi Singkat</TableTh>
+                  <TableTh>Image</TableTh>
+                  <TableTh>Detail</TableTh>
                </TableTr>
-              ))}
-            </TableTbody>
-          </Table>
-        </Box>
-      </Stack>
-    </Paper>
-  </Box>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{item.name}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{item.deskripsiSingkat}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Image w={100} src={item.image?.link} alt="image" />
+                    </TableTd>
+                    <TableTd>
+                      <Button onClick={() => router.push(`/admin/kesehatan/info-wabah-penyakit/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
+    </Box>
  )
 }

--- a/src/app/admin/(dashboard)/kesehatan/kontak-darurat/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/kontak-darurat/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import JudulList from '../../_com/judulList';
 import HeaderSearch from '../../_com/header';
@@ -21,7 +21,7 @@ function KontakDarurat() {
        value={search}
        onChange={(e) => setSearch(e.currentTarget.value)}
      />
-      <ListKontakDarurat search={search}/>
+      <ListKontakDarurat search={search} />
    </Box>
  );
 }
@@ -30,19 +30,21 @@ function ListKontakDarurat({ search }: { search: string }) {
  const kontakDaruratState = useProxy(kontakDarurat)
  const router = useRouter();

+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = kontakDaruratState.findMany;
+
  useShallowEffect(() => {
-    kontakDaruratState.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])

-  const filteredData = (kontakDaruratState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []

-  if (!kontakDaruratState.findMany.data) {
+  if (loading || !data) {
    return (
      <Box py={10}>
        <Skeleton h={500} />
@@ -77,7 +79,9 @@ function ListKontakDarurat({ search }: { search: string }) {
                      </Box>
                    </TableTd>
                    <TableTd>
-                      <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                      <Box w={100}>
+                        <Text truncate="end" lineClamp={1} fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                      </Box>
                    </TableTd>
                    <TableTd>
                      <Image w={100} src={item.image?.link} alt="image" />
@@ -94,6 +98,15 @@ function ListKontakDarurat({ search }: { search: string }) {
          </Box>
        </Stack>
      </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
    </Box>
  )
 }
--- a/src/app/admin/(dashboard)/kesehatan/penanganan-darurat/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/penanganan-darurat/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import JudulList from '../../_com/judulList';
 import HeaderSearch from '../../_com/header';
@@ -21,7 +21,7 @@ function PenangananDarurat() {
        value={search}
        onChange={(e) => setSearch(e.currentTarget.value)}
      />
-      <ListPenangananDarurat search={search}/>
+      <ListPenangananDarurat search={search} />
    </Box>
  );
 }
@@ -30,19 +30,21 @@ function ListPenangananDarurat({ search }: { search: string }) {
  const penangananDaruratState = useProxy(penangananDarurat)
  const router = useRouter();

+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = penangananDaruratState.findMany;
+
  useShallowEffect(() => {
-    penangananDaruratState.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])

-  const filteredData = (penangananDaruratState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []

-  if (!penangananDaruratState.findMany.data) {
+  if (loading || !data) {
    return (
      <Box py={10}>
        <Skeleton h={500} />
@@ -52,48 +54,59 @@ function ListPenangananDarurat({ search }: { search: string }) {

  return (
    <Box py={10}>
-    <Paper bg={colors['white-1']} p={'md'}>
-      <Stack>
-        <JudulList
-          title='List Penanganan Darurat'
-          href='/admin/kesehatan/penanganan-darurat/create'
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+            title='List Penanganan Darurat'
+            href='/admin/kesehatan/penanganan-darurat/create'
+          />
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Judul</TableTh>
+                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Image</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{item.name}</Text>
+                      </Box></TableTd>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text lineClamp={1} truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Image w={100} src={item.image?.link} alt="image" />
+                    </TableTd>
+                    <TableTd>
+                      <Button onClick={() => router.push(`/admin/kesehatan/penanganan-darurat/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
        />
-        <Box style={{ overflowX: "auto" }}>
-          <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-            <TableThead>
-              <TableTr>
-                <TableTh>Judul</TableTh>
-                <TableTh>Deskripsi</TableTh>
-                <TableTh>Image</TableTh>
-                <TableTh>Detail</TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              {filteredData.map((item) => (
-                <TableTr key={item.id}>
-                <TableTd>
-                  <Box w={100}>
-                    <Text truncate="end" fz={"sm"}>{item.name}</Text>
-                  </Box></TableTd>
-                <TableTd>
-                  <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
-                </TableTd>
-                <TableTd>
-                  <Image w={100} src={item.image?.link} alt="image" />
-                </TableTd>
-                <TableTd>
-                  <Button onClick={() => router.push(`/admin/kesehatan/penanganan-darurat/${item.id}`)}>
-                    <IconDeviceImacCog size={25} />
-                  </Button>
-                </TableTd>
-              </TableTr>
-            ))}
-            </TableTbody>
-          </Table>
-        </Box>
-      </Stack>
-    </Paper>
-  </Box>
+      </Center>
+    </Box>
  )
 }

--- a/src/app/admin/(dashboard)/kesehatan/program-kesehatan/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/program-kesehatan/page.tsx
@@ -39,7 +39,7 @@ function ListProgramKesehatan({ search }: { search: string }) {
  } = programKesehatanState.findMany;

  useShallowEffect(() => {
-    load(page, 3, search)
+    load(page, 10, search)
  }, [page, search])

  const filteredData = data || []
--- a/src/app/admin/(dashboard)/kesehatan/puskesmas/page.tsx
+++ b/src/app/admin/(dashboard)/kesehatan/puskesmas/page.tsx
@@ -39,7 +39,7 @@ function ListPuskesmas({ search }: { search: string }) {
  } = statePuskesmas.findMany;

  useShallowEffect(() => {
-    load(page, 3, search)
+    load(page, 10, search)
  }, [page, search])

  const filteredData = data || []
--- a/src/app/api/[[...slugs]]/_lib/kesehatan/info-wabah-penyakit/find-many.ts
+++ b/src/app/api/[[...slugs]]/_lib/kesehatan/info-wabah-penyakit/find-many.ts
@@ -1,25 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";

-export default async function infoWabahPenyakitFindMany() {
-    try {
-        const data = await prisma.infoWabahPenyakit.findMany({
-            where: {
-                isActive: true,
-            },
-            include: {
-                image: true,
-            }
-        })
-        return {
-            success: true,
-            message: "Success fetch info wabah penyakit",
-            data,
-        }
-    } catch (error) {
-        console.error("Find many error:", error);
-        return {
-            success: false,
-            message: "Failed fetch info wabah penyakit",
-        }
-    }
-}
+async function infoWabahPenyakitFindMany(context: Context) {
+  // Ambil parameter dari query
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || '';
+  const skip = (page - 1) * limit;
+
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { name: { contains: search, mode: 'insensitive' } },
+      { deskripsiLengkap: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.infoWabahPenyakit.findMany({
+        where,
+        include: {
+          image: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.infoWabahPenyakit.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil info wabah penyakit dengan pagination",
+      data,
+      page,
+      limit,
+      total,
+      totalPages: Math.ceil(total / limit),
+    };
+  } catch (e) {
+    console.error("Error di findMany paginated:", e);
+    return {
+      success: false,
+      message: "Gagal mengambil data info wabah penyakit",
+    };
+  }
+}
+
+export default infoWabahPenyakitFindMany;
--- a/src/app/api/[[...slugs]]/_lib/kesehatan/kontak-darurat/find-many.ts
+++ b/src/app/api/[[...slugs]]/_lib/kesehatan/kontak-darurat/find-many.ts
@@ -1,25 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";

-export default async function kontakDaruratFindMany() {
-    try {
-        const data = await prisma.kontakDarurat.findMany({
-            where: {
-                isActive: true,
-            },
-            include: {
-                image: true,
-            }
-        })
-        return {
-            success: true,
-            message: "Success fetch kontak darurat",
-            data,
-        }
-    } catch (error) {
-        console.error("Find many error:", error);
-        return {
-            success: false,
-            message: "Failed fetch kontak darurat",
-        }
-    }
-}
+async function kontakDaruratFindMany(context: Context) {
+  // Ambil parameter dari query
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || '';
+  const skip = (page - 1) * limit;
+
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { name: { contains: search, mode: 'insensitive' } },
+      { deskripsi: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.kontakDarurat.findMany({
+        where,
+        include: {
+          image: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.kontakDarurat.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil kontak darurat dengan pagination",
+      data,
+      page,
+      limit,
+      total,
+      totalPages: Math.ceil(total / limit),
+    };
+  } catch (e) {
+    console.error("Error di findMany paginated:", e);
+    return {
+      success: false,
+      message: "Gagal mengambil data kontak darurat",
+    };
+  }
+}
+
+export default kontakDaruratFindMany;
--- a/src/app/api/[[...slugs]]/_lib/kesehatan/penanganan-darurat/find-many.ts
+++ b/src/app/api/[[...slugs]]/_lib/kesehatan/penanganan-darurat/find-many.ts
@@ -1,25 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";

-export default async function penangananDaruratFindMany() {
-    try {
-        const data = await prisma.penangananDarurat.findMany({
-            where: {
-                isActive: true,
-            },
-            include: {
-                image: true,
-            }
-        })
-        return {
-            success: true,
-            message: "Success fetch penanganan darurat",
-            data,
-        }
-    } catch (error) {
-        console.error("Find many error:", error);
-        return {
-            success: false,
-            message: "Failed fetch penanganan darurat",
-        }
-    }
-}
+async function penangananDaruratFindMany(context: Context) {
+  // Ambil parameter dari query
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || '';
+  const skip = (page - 1) * limit;
+
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { name: { contains: search, mode: 'insensitive' } },
+      { deskripsi: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.penangananDarurat.findMany({
+        where,
+        include: {
+          image: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.penangananDarurat.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil penanganan darurat dengan pagination",
+      data,
+      page,
+      limit,
+      total,
+      totalPages: Math.ceil(total / limit),
+    };
+  } catch (e) {
+    console.error("Error di findMany paginated:", e);
+    return {
+      success: false,
+      message: "Gagal mengambil data penanganan darurat",
+    };
+  }
+}
+
+export default penangananDaruratFindMany;
--- a/src/app/darmasaba/(pages)/kesehatan/info-wabah-penyakit/page.tsx
+++ b/src/app/darmasaba/(pages)/kesehatan/info-wabah-penyakit/page.tsx
@@ -1,16 +1,58 @@
+'use client'
+import infoWabahPenyakit from '@/app/admin/(dashboard)/_state/kesehatan/info-wabah-penyakit/infoWabahPenyakit';
 import colors from '@/con/colors';
-import { Box, Image, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { Box, Center, Grid, GridCol, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconSearch } from '@tabler/icons-react';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';

 function Page() {
+  const state = useProxy(infoWabahPenyakit)
+  const [search, setSearch] = useState('')
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany;
+
+  useShallowEffect(() => {
+    load(page, 3, search)
+  }, [page, search])
+
+  if (loading || !data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
  return (
    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
      <Box px={{ base: 'md', md: 100 }}>
        <BackButton />
      </Box>
-      <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-        Info Wabah / Penyakit
-      </Text>
+      <Grid align='center' px={{ base: 'md', md: 100 }}>
+        <GridCol span={{ base: 12, md: 9 }}>
+          <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+            Info Wabah / Penyakit
+          </Text>
+        </GridCol>
+        <GridCol span={{ base: 12, md: 3 }}>
+          <TextInput
+            radius={"lg"}
+            placeholder='Cari Info Wabah / Penyakit'
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            leftSection={<IconSearch size={20} />}
+            w={{ base: "50%", md: "100%" }}
+          />
+        </GridCol>
+      </Grid>
      <Box px={{ base: "md", md: 100 }}>
        <Stack gap={'lg'}>
          <SimpleGrid
@@ -19,101 +61,41 @@ function Page() {
              md: 3,
            }}
          >
-            <Box>
-              <Paper p={'xl'} h={'80vh'} bg={colors['white-trans-1']}>
-                <Stack gap={'xs'}>
-                  <Box>
-                    <Text fw={"bold"} fz={'h3'} c={colors['blue-button']}>Demam Berdarah Dengue (DBD)</Text>
-                    <Image pt={5} src={'/api/img/dbd.png'} alt="" />
-                    <Text fz={'h4'} fw={'bold'} >
-                      Apa itu DBD penyebab, gejala dan cara penanganannya?
-                    </Text>
-                    <Text fz={'h6'} pb={10}>
-                      Diposting: 12 Februari 2025 | Dinas Kesehatan
-                    </Text>
-                    <Text fz={'h4'} pb={10}>
-                      Yuk Kenali gelaja dan cara penanganan DBD yang efektif untuk melindungi keluarga anda selama musim hujan.
-                    </Text>
-                    <List>
-                      <ListItem>
-                        Penyebab: Virus dengue yang ditularkan oleh nyamuk Aedes aegypti.
-                      </ListItem>
-                      <ListItem>
-                        Gejala: Demam tinggi, nyeri sendi, ruam kulit, dan pendarahan ringan.
-                      </ListItem>
-                      <ListItem>
-                        Pencegahan: Menguras tempat air, menutup wadah air, fogging, dan menggunakan lotion anti-nyamuk.
-                      </ListItem>
-                    </List>
-                  </Box>
-                </Stack>
-              </Paper>
-            </Box>
-            <Box>
-              <Paper p={'xl'} h={'80vh'} bg={colors['white-trans-1']}>
-                <Stack gap={'xs'}>
-                  <Box>
-                    <Text fw={"bold"} fz={'h3'} c={colors['blue-button']}>TBC (Tuberkulosis)</Text>
-                    <Image pt={5} src={'/api/img/tbc-1.png'} alt="" />
-                    <Text fz={'h4'} fw={'bold'} >
-                      Apa itu TBC penyebab, gejala dan cara penanganannya?
-                    </Text>
-                    <Text fz={'h6'} pb={10}>
-                      Diposting: 12 Februari 2025 | Dinas Kesehatan
-                    </Text>
-                    <Text fz={'h4'} pb={10}>
-                      Yuk Kenali gelaja dan cara penanganan TBC yang efektif untuk melindungi keluarga anda.
-                    </Text>
-                    <List>
-                      <ListItem>
-                        Penyebab: Bakteri Mycobacterium tuberculosis yang menyebar melalui udara.
-                      </ListItem>
-                      <ListItem>
-                        Gejala: Batuk lebih dari 2 minggu, berkeringat di malam hari, dan berat badan turun.
-                      </ListItem>
-                      <ListItem>
-                        Pencegahan: Vaksin BCG, pola hidup sehat, dan pengobatan bagi penderita agar tidak menular.
-                      </ListItem>
-                    </List>
-                  </Box>
-                </Stack>
-              </Paper>
-            </Box>
-            <Box>
-              <Paper p={'xl'} h={'80vh'} bg={colors['white-trans-1']}>
-                <Stack gap={'xs'}>
-                  <Box>
-                    <Text fw={"bold"} fz={'h3'} c={colors['blue-button']}>Diare dan Kolera</Text>
-                    <Image pt={5} src={'/api/img/diare.png'} alt="" />
-                    <Text fz={'h4'} fw={'bold'} >
-                      Apa itu Diare dan Kolera penyebab, gejala dan cara penanganannya?
-                    </Text>
-                    <Text fz={'h6'} pb={10}>
-                      Diposting: 12 Februari 2025 | Dinas Kesehatan
-                    </Text>
-                    <Text fz={'h4'} pb={10}>
-                      Yuk Kenali gelaja dan cara penanganan Diare dan Kolera yang efektif untuk melindungi keluarga anda.
-                    </Text>
-                    <List>
-                      <ListItem>
-                        Penyebab: Bakteri Vibrio cholerae (Kolera) atau Escherichia coli (diare) akibat makanan/minuman yang terkontaminasi.
-                      </ListItem>
-                      <ListItem>
-                        Gejala: Buang air besar cair terus-menerus, dehidrasi, dan lemas.
-                      </ListItem>
-                      <ListItem>
-                        Pencegahan: Menjaga kebersihan makanan dan air, serta mencuci tangan dengan sabun.
-                      </ListItem>
-                    </List>
-                  </Box>
-                </Stack>
-              </Paper>
-            </Box>
+            {data.map((v, k) => {
+              return (
+                <Paper key={k} p={'xl'} bg={colors['white-trans-1']}>
+                  <Stack gap={'xs'}>
+                    <Box>
+                      <Text fw={"bold"} fz={'h3'} c={colors['blue-button']}>{v.name}</Text>
+                      <Image w={330} h={200} fit='contain' pt={5} src={v.image.link} alt={v.name} />
+                      <Text fz={'h4'} fw={'bold'} >
+                        {v.name}
+                      </Text>
+                      <Text fz={'h6'} pb={10}>
+                        Diposting: 12 Februari 2025 | Dinas Kesehatan
+                      </Text>
+                      <Text fz={'h4'} pb={10}>
+                        {v.deskripsiSingkat}
+                      </Text>
+                      <Text fz={'h4'} pb={10} dangerouslySetInnerHTML={{ __html: v.deskripsiLengkap }} />
+                    </Box>
+                  </Stack>
+                </Paper>
+              )
+            })}
          </SimpleGrid>
        </Stack>
      </Box>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
    </Stack>
-
  );
 }

--- a/src/app/darmasaba/(pages)/kesehatan/kontak-darurat/page.tsx
+++ b/src/app/darmasaba/(pages)/kesehatan/kontak-darurat/page.tsx
@@ -1,72 +1,59 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Center, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
-import { IconHospitalCircle, IconPhone, IconReport, IconReportMedical, IconSpeakerphone } from '@tabler/icons-react';
+import { Box, Center, Grid, GridCol, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import BackButton from '../../desa/layanan/_com/BackButto';
+import { useProxy } from 'valtio/utils';
+import { useState } from 'react';

-const data1 = [
-  {
-    id: 1,
-    judul: 'Layanan Medis Cepat',
-    icon: <IconHospitalCircle size={80} color={colors["blue-button"]} />,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
-    </List>
-  },
-  {
-    id: 2,
-    judul: 'Nomor Darurat',
-    icon: <IconPhone size={80} color={colors["blue-button"]}/>,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans: 08125651052</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos Kesehatan: 08125651052</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Pemadam Kebakaran: 113</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Polisi: 110</ListItem>
-    </List>
-  },
-  {
-    id: 3,
-    judul: 'Posko Kesehatan & Evakuasi',
-    icon: <IconReportMedical size={80} color={colors["blue-button"]}/>,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
-    </List>
-  },
-  {
-    id: 4,
-    judul: 'Pelatihan & Sosialisasi',
-    icon: <IconSpeakerphone size={80} color={colors["blue-button"]}/>,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Setiap bulan, desa mengadakan pelatihan P3K (Pertolongan Pertama pada Kecelakaan) bagi masyarakat.</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Edukasi tentang tindakan saat bencana seperti gempa bumi dan banjir.</ListItem>
-    </List>
-  },
-  {
-    id: 5,
-    judul: 'Sistem Laporan Kejadian',
-    icon: <IconReport size={80} color={colors["blue-button"]}/>,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Warga bisa melaporkan kejadian darurat melalui aplikasi desa atau menghubungi perangkat desa.</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Laporan akan segera ditindaklanjuti oleh tim penanganan darurat.</ListItem>
-    </List>
-  }
-]
+import { useShallowEffect } from '@mantine/hooks';
+import kontakDarurat from '@/app/admin/(dashboard)/_state/kesehatan/kontak-darurat/kontakDarurat';
+import { IconSearch } from '@tabler/icons-react';

 function Page() {
+  const state = useProxy(kontakDarurat)
+  const [search, setSearch] = useState('')
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany;
+
+  useShallowEffect(() => {
+    load(page, 3, search)
+  }, [page, search])
+
+  if (loading || !data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
  return (
    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
      <Box px={{ base: 'md', md: 100 }}>
        <BackButton />
      </Box>
-      <Box>
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-          Kontak Darurat
-        </Text>
-        <Text px={{base: 20, md: 150}} ta={"center"} fz={{ base: "h4", md: "h3" }} >
-        Program kesehatan di Desa Darmasaba memiliki peran penting dalam meningkatkan kesejahteraan masyarakat. Kami berkomitmen untuk memberikan layanan darurat yang cepat, responsif, dan mudah diakses oleh seluruh warga.
-        </Text>
-      </Box>
+      <Grid align='center' px={{ base: 'md', md: 100 }}>
+        <GridCol span={{ base: 12, md: 9 }}>
+          <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+            Penanganan Darurat
+          </Text>
+        </GridCol>
+        <GridCol span={{ base: 12, md: 3 }}>
+          <TextInput
+            radius={"lg"}
+            placeholder='Cari Penanganan Darurat'
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            leftSection={<IconSearch size={20} />}
+            w={{ base: "50%", md: "100%" }}
+          />
+        </GridCol>
+      </Grid>
      <Box px={{ base: "md", md: 100 }}>
        <Stack gap={'lg'}>
          <SimpleGrid
@@ -75,20 +62,26 @@ function Page() {
              base: 1,
              md: 3,
            }}>
-            {data1.map((v, k) => {
+            {data.map((v, k) => {
              return (
                <Paper radius={10} key={k} bg={colors["white-trans-1"]}>
                  <Stack gap={'xs'}>
                    <Center py={40}>
-                      {v.icon}
+                      <Image
+                        src={v.image.link}
+                        alt={v.name}
+                        w={200}
+                        h={200}
+                        fit='contain'
+                      />
                    </Center>
                    <Box px={'lg'}>
                      <Box pb={20}>
                        <Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
-                          {v.judul}
+                          {v.name}
                        </Text>
                        <Box px={10}>
-                        {v.deskripsi}
+                          <Text fz={"h4"} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
                        </Box>
                      </Box>
                    </Box>
@@ -99,6 +92,15 @@ function Page() {
          </SimpleGrid>
        </Stack>
      </Box>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
    </Stack>
  );
 }
--- a/src/app/darmasaba/(pages)/kesehatan/penanganan-darurat/page.tsx
+++ b/src/app/darmasaba/(pages)/kesehatan/penanganan-darurat/page.tsx
@@ -1,72 +1,59 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Center, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
-import { IconHospitalCircle, IconPhone, IconReport, IconReportMedical, IconSpeakerphone } from '@tabler/icons-react';
+import { Box, Center, Grid, GridCol, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import BackButton from '../../desa/layanan/_com/BackButto';
+import { useProxy } from 'valtio/utils';
+import { useState } from 'react';

-const data1 = [
-  {
-    id: 1,
-    judul: 'Layanan Medis Cepat',
-    icon: <IconHospitalCircle size={80} color={colors["blue-button"]} />,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
-    </List>
-  },
-  {
-    id: 2,
-    judul: 'Nomor Darurat',
-    icon: <IconPhone size={80} color={colors["blue-button"]}/>,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans: 08125651052</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos Kesehatan: 08125651052</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Pemadam Kebakaran: 113</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Polisi: 110</ListItem>
-    </List>
-  },
-  {
-    id: 3,
-    judul: 'Posko Kesehatan & Evakuasi',
-    icon: <IconReportMedical size={80} color={colors["blue-button"]}/>,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
-    </List>
-  },
-  {
-    id: 4,
-    judul: 'Pelatihan & Sosialisasi',
-    icon: <IconSpeakerphone size={80} color={colors["blue-button"]}/>,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Setiap bulan, desa mengadakan pelatihan P3K (Pertolongan Pertama pada Kecelakaan) bagi masyarakat.</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Edukasi tentang tindakan saat bencana seperti gempa bumi dan banjir.</ListItem>
-    </List>
-  },
-  {
-    id: 5,
-    judul: 'Sistem Laporan Kejadian',
-    icon: <IconReport size={80} color={colors["blue-button"]}/>,
-    deskripsi: <List>
-      <ListItem>Warga bisa melaporkan kejadian darurat melalui aplikasi desa atau menghubungi perangkat desa.</ListItem>
-      <ListItem>Laporan akan segera ditindaklanjuti oleh tim penanganan darurat.</ListItem>
-    </List>
-  }
-]
+import { useShallowEffect } from '@mantine/hooks';
+import penangananDarurat from '@/app/admin/(dashboard)/_state/kesehatan/penanganan-darurat/penangananDarurat';
+import { IconSearch } from '@tabler/icons-react';

 function Page() {
+  const state = useProxy(penangananDarurat)
+  const [search, setSearch] = useState('')
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany;
+
+  useShallowEffect(() => {
+    load(page, 3, search)
+  }, [page, search])
+
+  if (loading || !data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
  return (
    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
      <Box px={{ base: 'md', md: 100 }}>
        <BackButton />
      </Box>
-      <Box>
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-          Penanganan Darurat
-        </Text>
-        <Text px={{base: 20, md: 150}} ta={"center"} fz={{ base: "h4", md: "h3" }} >
-          Program kesehatan di Desa Darmasaba memiliki peran penting dalam meningkatkan kesejahteraan masyarakat. Kami berkomitmen untuk memberikan layanan darurat yang cepat, responsif, dan mudah diakses oleh seluruh warga.
-        </Text>
-      </Box>
+      <Grid align='center' px={{ base: 'md', md: 100 }}>
+        <GridCol span={{ base: 12, md: 9 }}>
+          <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+            Penanganan Darurat
+          </Text>
+        </GridCol>
+        <GridCol span={{ base: 12, md: 3 }}>
+          <TextInput
+            radius={"lg"}
+            placeholder='Cari Penanganan Darurat'
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            leftSection={<IconSearch size={20} />}
+            w={{ base: "50%", md: "100%" }}
+          />
+        </GridCol>
+      </Grid>
      <Box px={{ base: "md", md: 100 }}>
        <Stack gap={'lg'}>
          <SimpleGrid
@@ -75,20 +62,26 @@ function Page() {
              base: 1,
              md: 3,
            }}>
-            {data1.map((v, k) => {
+            {data.map((v, k) => {
              return (
                <Paper radius={10} key={k} bg={colors["white-trans-1"]}>
                  <Stack gap={'xs'}>
                    <Center py={40}>
-                      {v.icon}
+                      <Image
+                        src={v.image.link}
+                        alt={v.name}
+                        w={200}
+                        h={200}
+                        fit='contain'
+                      />
                    </Center>
                    <Box px={'lg'}>
                      <Box pb={20}>
                        <Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
-                          {v.judul}
+                          {v.name}
                        </Text>
                        <Box px={10}>
-                        {v.deskripsi}
+                          <Text fz={"h4"} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
                        </Box>
                      </Box>
                    </Box>
@@ -99,6 +92,15 @@ function Page() {
          </SimpleGrid>
        </Stack>
      </Box>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
    </Stack>
  );
 }