FIX UI & API Menu Desa, Submenu Pelayanan Surat Keterangan

2025-08-04 17:46:51 +08:00
parent 0e55462adc
commit a2b68ec78b
14 changed files with 519 additions and 163 deletions
--- a/prisma/data/desa/layanan/pelayananSuratKeternagan.json
+++ b/prisma/data/desa/layanan/pelayananSuratKeternagan.json
--- a/prisma/data/desa/layanan/pelayananTelunjukSaktiDesa.json
+++ b/prisma/data/desa/layanan/pelayananTelunjukSaktiDesa.json
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -66,7 +66,8 @@ model FileStorage {
  Posyandu                 Posyandu[]
  StrukturPPID             StrukturPPID[]
  GalleryFoto              GalleryFoto[]
-  PelayananSuratKeterangan PelayananSuratKeterangan[]
+  
+  Pelapor                  Pelapor[]
  Penghargaan              Penghargaan[]
  ProfileDesaImage         ProfileDesaImage[]
  ProfilePPID              ProfilePPID[]
@@ -78,7 +79,8 @@ model FileStorage {
  InfoWabahPenyakit        InfoWabahPenyakit[]
  KeamananLingkungan       KeamananLingkungan[]
  MenuTipsKeamanan         MenuTipsKeamanan[]
-  Pelapor                  Pelapor[]
+  PelayananSuratKeteranganImage PelayananSuratKeterangan[] @relation("PelayananSuratKeteranganImage")
+  PelayananSuratKeteranganImage2 PelayananSuratKeterangan[] @relation("PelayananSuratKeteranganImage2")
  PasarDesa                PasarDesa[]
  KontakDaruratKeamanan    KontakDaruratKeamanan[]
  KontakItem               KontakItem[]
@@ -100,6 +102,7 @@ model FileStorage {
  DataPerpustakaan DataPerpustakaan[]

  PegawaiPPID PegawaiPPID[]
+
 }

 //========================================= MENU LANDING PAGE ========================================= //
@@ -675,8 +678,10 @@ model PelayananSuratKeterangan {
  id        String       @id @default(cuid())
  name      String
  deskripsi String       @db.Text
-  image     FileStorage @relation(fields: [imageId], references: [id])
-  imageId   String
+  image     FileStorage? @relation("PelayananSuratKeteranganImage", fields: [imageId], references: [id])
+  imageId   String?
+  image2    FileStorage? @relation("PelayananSuratKeteranganImage2", fields: [image2Id], references: [id])
+  image2Id  String?
  createdAt DateTime     @default(now())
  updatedAt DateTime     @updatedAt
  deletedAt DateTime     @default(now())
--- a/src/app/admin/(dashboard)/_state/desa/layananDesa.ts
+++ b/src/app/admin/(dashboard)/_state/desa/layananDesa.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";
@@ -8,12 +9,14 @@ const templateSuratKeteranganForm = z.object({
  name: z.string().min(3, "Nama minimal 3 karakter"),
  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
  imageId: z.string().nonempty(),
+  image2Id: z.string().nonempty(),
 });

 const suratKeteranganForm = {
  name: "",
  deskripsi: "",
  imageId: "",
+  image2Id: "",
 };

 const telunjukSaktiDesaForm = {
@@ -105,15 +108,38 @@ const suratKeterangan = proxy({
    },
  },
  findMany: {
-    data: [] as Prisma.PelayananSuratKeteranganGetPayload<{
-      include: { image: true };
-    }>[],
-    async load() {
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
+      suratKeterangan.findMany.loading = true;  // Use the full path to access the property
+      suratKeterangan.findMany.page = page;
+      try {
        const res = await ApiFetch.api.desa.layanan.pelayanansuratketerangan[
          "find-many"
-      ].get();
-      if (res.status === 200) {
-        suratKeterangan.findMany.data = res.data?.data ?? [];
+        ].get({
+          query: { page, limit },
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          suratKeterangan.findMany.data = res.data.data || [];
+          suratKeterangan.findMany.total = res.data.total || 0;
+          suratKeterangan.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load surat keterangan:", res.data?.message);
+          suratKeterangan.findMany.data = [];
+          suratKeterangan.findMany.total = 0;
+          suratKeterangan.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading surat keterangan:", error);
+        suratKeterangan.findMany.data = [];
+        suratKeterangan.findMany.total = 0;
+        suratKeterangan.findMany.totalPages = 1;
+      } finally {
+        suratKeterangan.findMany.loading = false;
      }
    },
  },
@@ -121,6 +147,7 @@ const suratKeterangan = proxy({
    data: null as Prisma.PelayananSuratKeteranganGetPayload<{
      include: {
        image: true;
+        image2: true;
      };
    }> | null,
    async load(id: string) {
@@ -202,6 +229,7 @@ const suratKeterangan = proxy({
            name: data.name,
            deskripsi: data.deskripsi,
            imageId: data.imageId || "",
+            image2Id: data.image2Id || "",
          };
          return data;
        } else {
@@ -238,6 +266,7 @@ const suratKeterangan = proxy({
              name: this.form.name,
              deskripsi: this.form.deskripsi,
              imageId: this.form.imageId,
+              image2Id: this.form.image2Id,
            }),
          }
        );
--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/[id]/edit/page.tsx
@@ -4,8 +4,9 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -16,11 +17,14 @@ function EditSuratKeterangan() {
  const params = useParams()
  const stateSurat = useProxy(stateLayananDesa.suratKeterangan)
  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [previewImage2, setPreviewImage2] = useState<string | null>(null);
  const [file, setFile] = useState<File | null>(null);
+  const [file2, setFile2] = useState<File | null>(null);
  const [formData, setFormData] = useState({
    name: stateSurat.edit.form.name,
    deskripsi: stateSurat.edit.form.deskripsi,
    imageId: stateSurat.edit.form.imageId,
+    image2Id: stateSurat.edit.form.image2Id,
  })

  useEffect(() => {
@@ -31,12 +35,22 @@ function EditSuratKeterangan() {
        const data = await stateSurat.edit.load(id);
        if (data) {
          setFormData({
-            name: data.name,
-            deskripsi: data.deskripsi,
-            imageId: data.imageId,
+            name: data.name || "",
+            deskripsi: data.deskripsi || "",
+            imageId: data.imageId || "",
+            image2Id: data.image2Id || "",
          });
-          if (data?.image?.link) {
+
+          if (data.image?.link) {
            setPreviewImage(data.image.link);
+          } else {
+            setPreviewImage(null);
+          }
+
+          if (data.image2?.link) {
+            setPreviewImage2(data.image2.link);
+          } else {
+            setPreviewImage2(null);
          }
        }
      } catch (error) {
@@ -54,6 +68,7 @@ function EditSuratKeterangan() {
        name: formData.name,
        deskripsi: formData.deskripsi,
        imageId: formData.imageId,
+        image2Id: formData.image2Id,
      }
      if (file) {
        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
@@ -66,6 +81,17 @@ function EditSuratKeterangan() {
        stateSurat.edit.form.imageId = uploaded.id;
      }

+      if (file2) {
+        const res = await ApiFetch.api.fileStorage.create.post({ file: file2, name: file2.name });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+
+        stateSurat.edit.form.image2Id = uploaded.id;
+      }
+
      await stateSurat.edit.update()
      toast.success("Surat berhasil diperbarui!")
      router.push("/admin/desa/layanan/pelayanan_surat_keterangan")
@@ -103,25 +129,106 @@ function EditSuratKeterangan() {
              }}
            />
          </Box>
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Konten</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box >
+              <Dropzone
+                onDrop={(files) => {
+                  const file = files[0]; // Hanya ambil file pertama
+                  if (file) {
+                    setFile(file);
+                    setPreviewImage(URL.createObjectURL(file)); // Buat preview
+                  }
                }}
+                maxSize={5 * 1024 ** 2} // 5MB
+                accept={{
+                  'image/*': ['.jpeg', '.jpg', '.png', '.webp']
+                }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag images here or click to select files
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Attach as many files as you like, each file should not exceed 5mb
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+              {previewImage && (
+                <Image
+                  src={previewImage}
+                  alt="Preview"
+                  width={280}
+                  height={180}
+                  fit="cover"
+                  radius="sm"
+                  mt="md"
                />
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
              )}
+            </Box>
+          </Box>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box >
+              <Dropzone
+                onDrop={(files) => {
+                  const file = files[0]; // Hanya ambil file pertama
+                  if (file) {
+                    setFile2(file);
+                    setPreviewImage2(URL.createObjectURL(file)); // Buat preview
+                  }
+                }}
+                maxSize={5 * 1024 ** 2} // 5MB
+                accept={{
+                  'image/*': ['.jpeg', '.jpg', '.png', '.webp']
+                }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag images here or click to select files
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Attach as many files as you like, each file should not exceed 5mb
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+              {previewImage2 && (
+                <Image
+                  src={previewImage2}
+                  alt="Preview"
+                  width={280}
+                  height={180}
+                  fit="cover"
+                  radius="sm"
+                  mt="md"
+                />
+              )}
+            </Box>
+          </Box>
          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
        </Stack>
      </Paper>
--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/[id]/page.tsx
@@ -64,6 +64,10 @@ function DetailSuratKeterangan() {
                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
                  <Image w={{ base: 150, md: 150, lg: 150 }} src={suratKeteranganState.findUnique.data?.image?.link} alt="gambar" />
                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 150, md: 150, lg: 150 }} src={suratKeteranganState.findUnique.data?.image2?.link} alt="gambar" />
+                </Box>
                <Flex gap={"xs"} mt={10}>
                  <Button
                    onClick={() => {
--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/create/page.tsx
+++ b/src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/create/page.tsx
@@ -3,8 +3,9 @@ import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
@@ -12,8 +13,8 @@ import { useProxy } from 'valtio/utils';

 function CreateSuratKeterangan() {
  const stateSurat = useProxy(stateLayananDesa.suratKeterangan)
-  const [previewImage, setPreviewImage] = useState<string | null>(null);
-  const [file, setFile] = useState<File | null>(null);
+  const [previewImage2, setPreviewImage2] = useState<{ preview: string; file: File } | null>(null);
+  const [previewImage, setPreviewImage] = useState<{ preview: string; file: File } | null>(null);
  const router = useRouter()

  const resetForm = () => {
@@ -21,33 +22,57 @@ function CreateSuratKeterangan() {
      name: "",
      deskripsi: "",
      imageId: "",
+      image2Id: ""
    }
    setPreviewImage(null)
-    setFile(null)
+    setPreviewImage2(null)
  }

  const handleSubmit = async () => {
-    if (!file) {
-      return toast.error("Silahkan pilih file gambar terlebih dahulu")
+    if (!previewImage) {
+      return toast.warn("Pilih file gambar utama terlebih dahulu");
    }

-    const res = await ApiFetch.api.fileStorage.create.post({
-      file: file,
-      name: file.name
-    })
+    try {
+      // Upload gambar utama
+      const res1 = await ApiFetch.api.fileStorage.create.post({
+        file: previewImage.file,
+        name: `main_${previewImage.file.name}`,
+      });

-    const uploaded = res.data?.data
-    if (!uploaded?.id) {
-      return toast.error("Gagal upload gambar")
+      const uploadedImage1 = res1.data?.data;
+      if (!uploadedImage1?.id) {
+        return toast.error("Gagal upload gambar utama");
      }

-    stateSurat.create.form.imageId = uploaded.id
-
-    await stateSurat.create.create()
-    resetForm()
-    router.push("/admin/desa/layanan/pelayanan_surat_keterangan")
-
+      let uploadedImage2 = null;
+      // Upload gambar kedua jika ada
+      if (previewImage2) {
+        const res2 = await ApiFetch.api.fileStorage.create.post({
+          file: previewImage2.file,
+          name: `secondary_${previewImage2.file.name}`,
+        });
+        uploadedImage2 = res2.data?.data;
      }
+
+      // Set form data
+      stateSurat.create.form.imageId = uploadedImage1.id;
+      if (uploadedImage2?.id) {
+        stateSurat.create.form.image2Id = uploadedImage2.id;
+      }
+
+      // Create the record
+      await stateSurat.create.create();
+
+      // Reset form dan redirect
+      resetForm();
+      toast.success("Data surat keterangan berhasil ditambahkan");
+      router.push("/admin/desa/layanan/pelayanan_surat_keterangan");
+    } catch (error) {
+      console.error("Error creating surat keterangan:", error);
+      toast.error("Terjadi kesalahan saat menambahkan surat keterangan");
+    }
+  };
  return (
    <Box>
      <Box mb={10}>
@@ -75,25 +100,105 @@ function CreateSuratKeterangan() {
              }}
            />
          </Box>
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Konten</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
+          <Box>
+            <Text fz={"md"} fw={"bold"} mb="sm">Gambar Utama</Text>
+            <Dropzone
+              onDrop={(files) => {
+                const file = files[0];
+                if (file) {
+                  setPreviewImage({
+                    file,
+                    preview: URL.createObjectURL(file)
+                  });
+                }
              }}
+              maxSize={5 * 1024 ** 2}
+              accept={{
+                'image/*': ['.jpeg', '.jpg', '.png', '.webp']
+              }}
+            >
+              <Group justify="center" gap="xl" mih={120} style={{ pointerEvents: 'none' }}>
+                <Dropzone.Accept>
+                  <IconUpload size={32} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={32} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={32} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+                <div>
+                  <Text size="md" inline>Seret gambar ke sini atau klik untuk memilih</Text>
+                  <Text size="sm" c="dimmed" inline mt={7} display="block">
+                    Ukuran maksimal 5MB (JPEG, JPG, PNG, WebP)
+                  </Text>
+                </div>
+              </Group>
+            </Dropzone>
+            {previewImage && (
+              <Image
+                src={previewImage.preview}
+                alt="Preview Gambar Utama"
+                width={280}
+                height={180}
+                fit="cover"
+                radius="sm"
+                mt="md"
              />
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
            )}
+          </Box>
+
+          <Box mt="lg">
+            <Text fz={"md"} fw={"bold"} mb="sm">Gambar Tambahan (Opsional)</Text>
+            <Dropzone
+              onDrop={(files) => {
+                const file = files[0];
+                if (file) {
+                  setPreviewImage2({
+                    file,
+                    preview: URL.createObjectURL(file)
+                  });
+                }
+              }}
+              maxSize={5 * 1024 ** 2}
+              accept={{
+                'image/*': ['.jpeg', '.jpg', '.png', '.webp']
+              }}
+            >
+              <Group justify="center" gap="xl" mih={120} style={{ pointerEvents: 'none' }}>
+                <Dropzone.Accept>
+                  <IconUpload size={32} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={32} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={32} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+                <div>
+                  <Text size="md" inline>Seret gambar ke sini atau klik untuk memilih</Text>
+                  <Text size="sm" c="dimmed" inline mt={7} display="block">
+                    Ukuran maksimal 5MB (JPEG, JPG, PNG, WebP)
+                  </Text>
+                </div>
+              </Group>
+            </Dropzone>
+            {previewImage2 ? (
+              <Image
+                src={previewImage2.preview}
+                alt="Preview Gambar Tambahan"
+                width={280}
+                height={180}
+                fit="cover"
+                radius="sm"
+                mt="md"
+              />
+            ) : (
+              <Text size="sm" c="dimmed" mt="sm">
+                Kosongkan jika tidak ada gambar tambahan
+              </Text>
+            )}
+          </Box>
          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
        </Stack>
      </Paper>
--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/page.tsx
+++ b/src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/page.tsx
@@ -1,21 +1,21 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
-import JudulListTab from '@/app/admin/(dashboard)/_com/judulListTab';
 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, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
-import { useProxy } from 'valtio/utils';
-import stateLayananDesa from '../../../_state/desa/layananDesa';
-import { useShallowEffect } from '@mantine/hooks';
 import { useRouter } from 'next/navigation';
-import { useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import stateLayananDesa from '../../../_state/desa/layananDesa';

 function SuratKeterangan() {
  const [search, setSearch] = useState("");
  return (
    <Box>
      <HeaderSearch
-        title='Posisi Organisasi'
+        title='Pelayanan Surat Keterangan'
        placeholder='pencarian'
        searchIcon={<IconSearch size={20} />}
        value={search}
@@ -30,53 +30,89 @@ function ListSuratKeterangan({ search }: { search: string }) {
  const suratKeteranganState = useProxy(stateLayananDesa.suratKeterangan)
  const router = useRouter()

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

-  const filteredData = (suratKeteranganState.findMany.data || []).filter(item => {
+   const filteredData = useMemo(() => {
+      if (!data) return [];
+      return data.filter(item => {
        const keyword = search.toLowerCase();
        return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword)
+          item.name?.toLowerCase().includes(keyword) ||
+          item.deskripsi?.toLowerCase().includes(keyword)
        );
-  });
+      })
+      .sort((a, b) => a.posisi?.hierarki - b.posisi?.hierarki); 
+    }, [data, search]); 
  
-  if (!suratKeteranganState.findMany.data) {
+    // Handle loading state
+    if (loading || !data) {
      return (
        <Stack py={10}>
-        <Skeleton h={500} />
+          <Skeleton height={300} />
        </Stack>
-    )
+      );
    }
  
+    if (data.length === 0) {
      return (
        <Box py={10}>
           <Paper bg={colors['white-1']} p={'md'}>
-        <JudulListTab
+          <JudulList
+            title='List Surat Keterangan'
+            href='/admin/desa/layanan/pelayanan_surat_keterangan/create'
+          />
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withTableBorder withRowBorders>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nama</TableTh>
+                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+            </Table>
+          </Box>
+        </Paper>
+        </Box>
+      );
+    }
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
          title='List Surat Keterangan'
          href='/admin/desa/layanan/pelayanan_surat_keterangan/create'
-          placeholder='pencarian'
-          searchIcon={<IconSearch size={16} />}
        />
        <Table striped withTableBorder withRowBorders>
          <TableThead>
            <TableTr>
              <TableTh>Nama</TableTh>
              <TableTh>Deskripsi</TableTh>
-              <TableTh>Image</TableTh>
              <TableTh>Detail</TableTh>
            </TableTr>
          </TableThead>
          <TableTbody>
            {filteredData.map((item) => (
              <TableTr key={item.id}>
-                <TableTd>{item.name}</TableTd>
                <TableTd>
-                  <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                  <Box w={200}>
+                  <Text truncate="end" fz={"sm"}>{item.name}</Text>
+                  </Box>
                </TableTd>  
                <TableTd>
-                  <Image w={100} src={item.image?.link} alt="gambar" />
+                  <Box w={300}>
+                  <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                  </Box>
                </TableTd>
                <TableTd>
                  <Text>
@@ -90,6 +126,18 @@ function ListSuratKeterangan({ search }: { search: string }) {
          </TableTbody>
        </Table>
      </Paper>
+      <Center> 
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo(0, 0); 
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
    </Box>
  );
 }
--- a/src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_surat_keterangan/create.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_surat_keterangan/create.ts
@@ -7,6 +7,7 @@ type FormCreate = Prisma.PelayananSuratKeteranganGetPayload<{
        name: true;
        deskripsi: true;
        imageId: true;
+        image2Id: true;
    };
 }>;
 async function createPelayananSuratKeterangan(context: Context) {
@@ -17,6 +18,7 @@ async function createPelayananSuratKeterangan(context: Context) {
            name: body.name,
            deskripsi: body.deskripsi,
            imageId: body.imageId,
+            image2Id: body.image2Id,
        },
    });
    return {
--- a/src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_surat_keterangan/del.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_surat_keterangan/del.ts
@@ -17,6 +17,7 @@ const pelayananSuratKeteranganDelete = async (context: Context) => {
        where: { id },
        include: {
            image: true,
+            image2: true,
        },
    });

@@ -40,6 +41,18 @@ const pelayananSuratKeteranganDelete = async (context: Context) => {
        }
    }

+    if (pelayananSuratKeterangan.image2) {
+        try {
+            const filePath = path.join(pelayananSuratKeterangan.image2.path, pelayananSuratKeterangan.image2.name);
+            await fs.unlink(filePath);
+            await prisma.fileStorage.delete({
+                where: { id: pelayananSuratKeterangan.image2.id },
+            });
+        } catch (err) {
+            console.error("Gagal hapus gambar lama:", err);
+        }
+    }
+
    const deleted = await prisma.pelayananSuratKeterangan.delete({
        where: { id },
    });
--- a/src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_surat_keterangan/find-many.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_surat_keterangan/find-many.ts
@@ -1,24 +1,47 @@
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function pelayananSuratKeteranganFindMany(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 pelayananSuratKeteranganFindMany() {
  try {
-        const data = await prisma.pelayananSuratKeterangan.findMany({
+    const [data, total] = await Promise.all([
+      prisma.pelayananSuratKeterangan.findMany({
        where: { isActive: true },
        include: {
          image: true,
+          image2: true,
        },
-        });
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.pelayananSuratKeterangan.count({
+        where: { isActive: true }
+      })
+    ]);
+
+    const totalPages = Math.ceil(total / limit);

    return {
      success: true,
-            message: "Success fetch pelayanan surat keterangan",
+      message: "Success fetch pelayanan surat keterangan with pagination",
      data,
+      page,
+      totalPages,
+      total,
    };
  } catch (e) {
-        console.error("Find many error:", e);
+    console.error("Find many paginated error:", e);
    return {
      success: false,
-            message: "Failed fetch pelayanan surat keterangan",
+      message: "Failed fetch pelayanan surat keterangan with pagination",
+      data: [],
+      page: 1,
+      totalPages: 1,
+      total: 0,
    };
  }
 }
--- a/src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_surat_keterangan/findUnique.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_surat_keterangan/findUnique.ts
@@ -24,6 +24,7 @@ export default async function pelayananSuratKeteranganFindUnique(request: Reques
            where: { id },
            include: {
                image: true,
+                image2: true,
            },
        });

--- a/src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_surat_keterangan/index.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_surat_keterangan/index.ts
@@ -18,6 +18,7 @@ const PelayananSuratKeterangan = new Elysia({ prefix: "/pelayanansuratketerangan
        name: t.String(),
        deskripsi: t.String(),
        imageId: t.String(),
+        image2Id: t.String(),
    }),
 })
 .delete("/del/:id", pelayananSuratKeteranganDelete)
@@ -30,6 +31,7 @@ const PelayananSuratKeterangan = new Elysia({ prefix: "/pelayanansuratketerangan
        name: t.String(),
        deskripsi: t.String(),
        imageId: t.String(),
+        image2Id: t.String(),
    }),
 })
 export default PelayananSuratKeterangan;
--- a/src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_surat_keterangan/updt.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_surat_keterangan/updt.ts
@@ -9,6 +9,7 @@ type FormUpdate = Prisma.PelayananSuratKeteranganGetPayload<{
        name: true;
        deskripsi: true;
        imageId: true;
+        image2Id: true;
    };
 }>;
 export default async function updatePelayananSuratKeterangan(context: Context) {
@@ -16,7 +17,7 @@ export default async function updatePelayananSuratKeterangan(context: Context) {
        const id = context.params?.id;
        const body = (await context.body) as Omit<FormUpdate, "id">;

-        const { name, deskripsi, imageId } = body;
+        const { name, deskripsi, imageId, image2Id } = body;

        if (!id) {
            return new Response(JSON.stringify({
@@ -63,12 +64,28 @@ export default async function updatePelayananSuratKeterangan(context: Context) {
            }
        }

+        if (existing.image2Id && existing.image2Id !== image2Id) {
+            const oldImage = existing.image;
+            if (oldImage) {
+                try {
+                    const filePath = path.join(oldImage.path, oldImage.name);
+                    await fs.unlink(filePath);
+                    await prisma.fileStorage.delete({
+                        where: { id: oldImage.id },
+                    });
+                } catch (err) {
+                    console.error("Gagal hapus gambar lama:", err);
+                }
+            }
+        }
+
        const updated = await prisma.pelayananSuratKeterangan.update({
            where: { id },
            data: {
                name,
                deskripsi,
                imageId,
+                image2Id,
            },
        })