API & UI Admin Menu Desa, Submenu Pengumuman

src/app/admin/(dashboard)/_state/desa/pengumuman.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";
@@ -110,7 +111,9 @@ const category = proxy({
         }
       } catch (error) {
         console.error("Gagal delete:", error);
-        toast.error("Terjadi kesalahan saat menghapus Data Kategori Pengumuman");
+        toast.error(
+          "Terjadi kesalahan saat menghapus Data Kategori Pengumuman"
+        );
       } finally {
         category.delete.loading = false;
       }
@@ -150,7 +153,7 @@ const category = proxy({
           throw new Error(result?.message || "Gagal memuat data");
         }
       } catch (error) {
-        console.error("Error loading kategori berita:", error);
+        console.error("Error loading kategori pengumuman:", error);
         toast.error(
           error instanceof Error ? error.message : "Gagal memuat data"
         );
@@ -170,15 +173,18 @@ const category = proxy({
       try {
         category.update.loading = true;
 
-        const response = await fetch(`/api/desa/kategoripengumuman/${this.id}`, {
+        const response = await fetch(
-          method: "PUT",
+          `/api/desa/kategoripengumuman/${this.id}`,
-          headers: {
+          {
-            "Content-Type": "application/json",
+            method: "PUT",
-          },
+            headers: {
-          body: JSON.stringify({
+              "Content-Type": "application/json",
-            name: this.form.name,
+            },
-          }),
+            body: JSON.stringify({
-        });
+              name: this.form.name,
+            }),
+          }
+        );
 
         if (!response.ok) {
           const errorData = await response.json().catch(() => ({}));
@@ -224,17 +230,15 @@ const templateFormPengumuman = z.object({
   categoryPengumumanId: z.string().nonempty(),
 });
 
-type PengumumanForm = Prisma.PengumumanGetPayload<{
+const defaultForm = {
-  select: {
+  judul: "",
-    judul: true;
+  deskripsi: "",
-    deskripsi: true;
+  content: "",
-    content: true;
+  categoryPengumumanId: "",
-    categoryPengumumanId: true;
+};
-  };
-}>;
 const pengumuman = proxy({
   create: {
-    form: {} as PengumumanForm,
+    form: { ...defaultForm },
     loading: false,
     async create() {
       const cek = templateFormPengumuman.safeParse(pengumuman.create.form);
@@ -270,11 +274,35 @@ const pengumuman = proxy({
           };
         }>[]
       | null,
-    async load() {
+    page: 1,
-      const res = await ApiFetch.api.desa.pengumuman["find-many"].get();
+    totalPages: 1,
-      console.log(res);
+    loading: false,
-      if (res.status === 200) {
+    search: "",
-        pengumuman.findMany.data = res.data?.data ?? [];
+   load: async (page = 1, limit = 10, search = "", kategori = "") => {
+      pengumuman.findMany.loading = true; // ✅ Akses langsung via nama path
+      pengumuman.findMany.page = page;
+      pengumuman.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        if (kategori) query.kategori = kategori;
+    
+        const res = await ApiFetch.api.desa.pengumuman["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          pengumuman.findMany.data = res.data.data ?? [];
+          pengumuman.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          pengumuman.findMany.data = [];
+          pengumuman.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch pengumuman paginated:", err);
+        pengumuman.findMany.data = [];
+        pengumuman.findMany.totalPages = 1;
+      } finally {
+        pengumuman.findMany.loading = false;
       }
     },
   },
@@ -308,7 +336,7 @@ const pengumuman = proxy({
       try {
         pengumuman.delete.loading = true;
 
-        const response = await fetch(`/api/desa/pengumuman/delete/${id}`, {
+        const response = await fetch(`/api/desa/pengumuman/del/${id}`, {
           method: "DELETE",
           headers: {
             "Content-Type": "application/json",
@@ -331,9 +359,9 @@ const pengumuman = proxy({
       }
     },
   },
-  update: {
+  edit: {
     id: "",
-    form: {} as PengumumanForm,
+    form: { ...defaultForm },
     loading: false,
 
     async load(id: string) {
@@ -349,6 +377,7 @@ const pengumuman = proxy({
             "Content-Type": "application/json",
           },
         });
+
         if (!response.ok) {
           throw new Error(`HTTP error! status: ${response.status}`);
         }
@@ -364,20 +393,21 @@ const pengumuman = proxy({
             content: data.content,
             categoryPengumumanId: data.categoryPengumumanId || "",
           };
-          return data;
+          return data; // Return the loaded data
         } else {
-          throw new Error(result?.message || "Gagal mengambil data pengumuman");
+          throw new Error(result?.message || "Gagal memuat data");
         }
       } catch (error) {
-        console.error((error as Error).message);
+        console.error("Error loading pengumuman:", error);
-        toast.error("Terjadi kesalahan saat mengambil data pengumuman");
+        toast.error(
-      } finally {
+          error instanceof Error ? error.message : "Gagal memuat data"
-        pengumuman.update.loading = false;
+        );
+        return null;
       }
     },
 
     async update() {
-      const cek = templateFormPengumuman.safeParse(pengumuman.update.form);
+      const cek = templateFormPengumuman.safeParse(pengumuman.edit.form);
       if (!cek.success) {
         const err = `[${cek.error.issues
           .map((v) => `${v.path.join(".")}`)
@@ -387,7 +417,7 @@ const pengumuman = proxy({
       }
 
       try {
-        pengumuman.update.loading = true;
+        pengumuman.edit.loading = true;
 
         const response = await fetch(`/api/desa/pengumuman/${this.id}`, {
           method: "PUT",
@@ -398,7 +428,7 @@ const pengumuman = proxy({
             judul: this.form.judul,
             deskripsi: this.form.deskripsi,
             content: this.form.content,
-            categoryPengumumanId: this.form.categoryPengumumanId,
+            categoryPengumumanId: this.form.categoryPengumumanId || null,
           }),
         });
 
@@ -427,9 +457,14 @@ const pengumuman = proxy({
         );
         return false;
       } finally {
-        pengumuman.update.loading = false;
+        pengumuman.edit.loading = false;
       }
     },
+
+    reset() {
+      pengumuman.edit.id = "";
+      pengumuman.edit.form = { ...defaultForm };
+    },
   },
   findFirst: {
     data: null as Prisma.PengumumanGetPayload<{

src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/[id]/edit/page.tsx

@@ -1,52 +1,139 @@
-'use client'
+/* eslint-disable react-hooks/exhaustive-deps */
-import colors from '@/con/colors';
+"use client";
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+
-import { IconArrowBack } from '@tabler/icons-react';
+import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
-import { useRouter } from 'next/navigation';
+import stateDesaPengumuman from "@/app/admin/(dashboard)/_state/desa/pengumuman";
-import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+import colors from "@/con/colors";
+import {
+  Box,
+  Button,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Title
+} from "@mantine/core";
+import { IconArrowBack } from "@tabler/icons-react";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import { useProxy } from "valtio/utils";
+
 
 function EditPengumuman() {
+  const editState = useProxy(stateDesaPengumuman);
   const router = useRouter();
+  const params = useParams();
+
+  const [formData, setFormData] = useState({
+    judul: editState.pengumuman.edit.form.judul || '',
+    deskripsi: editState.pengumuman.edit.form.deskripsi || '',
+    categoryPengumumanId: editState.pengumuman.edit.form.categoryPengumumanId || '',
+    content: editState.pengumuman.edit.form.content || ''
+  });
+
+  // Load pengumuman by id saat pertama kali
+  useEffect(() => {
+    editState.category.findMany.load()
+    const loadpengumuman = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await stateDesaPengumuman.pengumuman.edit.load(id); // akses langsung, bukan dari proxy
+        if (data) {
+          setFormData({
+            judul: data.judul || '',
+            deskripsi: data.deskripsi || '',
+            categoryPengumumanId: data.categoryPengumumanId || '',
+            content: data.content || '',
+          });
+        }
+      } catch (error) {
+        console.error("Error loading pengumuman:", error);
+        toast.error("Gagal memuat data pengumuman");
+      }
+    };
+
+    loadpengumuman();
+  }, [params?.id]); // ✅ hapus editState dari dependency
+
+  const handleSubmit = async () => {
+
+    try {
+      // edit global state with form data
+      editState.pengumuman.edit.form = {
+        ...editState.pengumuman.edit.form,
+        judul: formData.judul,
+        deskripsi: formData.deskripsi,
+        content: formData.content,
+        categoryPengumumanId: formData.categoryPengumumanId || ''
+      };
+      await editState.pengumuman.edit.update();
+      toast.success("pengumuman berhasil diperbarui!");
+      router.push("/admin/desa/pengumuman/list-pengumuman");
+    } catch (error) {
+      console.error("Error updating pengumuman:", error);
+      toast.error("Terjadi kesalahan saat memperbarui pengumuman");
+    }
+  };
+
   return (
     <Box>
       <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
+          <IconArrowBack color={colors["blue-button"]} size={30} />
         </Button>
       </Box>
-
+      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
-          <Title order={4}>Edit Pengumuman</Title>
+          <Title order={3}>Edit pengumuman</Title>
           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+            value={formData.judul}
-          placeholder='Masukkan judul'
+            onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+            placeholder="masukkan judul"
           />
+
           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat</Text>}
+            value={formData.deskripsi}
-          placeholder='Masukkan deskripsi singkat'
+            onChange={(e) => setFormData({ ...formData, deskripsi: e.target.value })}
-          />
+            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
-          <TextInput
+            placeholder="masukkan deskripsi"
-          label={<Text fw={"bold"} fz={"sm"}>Tanggal</Text>}
-          placeholder='Masukkan tanggal'
-          />
-           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Waktu</Text>}
-          placeholder='Masukkan waktu'
           />
           <Box>
-          <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
+            <Text fz={"sm"} fw={"bold"}>Konten</Text>
-          <KeamananEditor
+            <EditEditor
-          showSubmit={false}
+              value={formData.content}
-          />
+              onChange={(htmlContent) => {
+                setFormData((prev) => ({ ...prev, content: htmlContent }));
+                editState.pengumuman.edit.form.content = htmlContent;
+              }}
+            />
           </Box>
 
-          <Group>
+          <Select
-            <Button bg={colors['blue-button']}>Submit</Button>
+            value={formData.categoryPengumumanId}
-          </Group>
+            onChange={(val) => setFormData({ ...formData, categoryPengumumanId: val || "" })}
-       </Stack>
+            label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
+            placeholder='Pilih kategori'
+            data={
+              editState.category.findMany.data?.map((v) => ({
+                value: v.id,
+                label: v.name
+              })) || []
+            }
+            clearable
+            searchable
+            required
+            error={!formData.categoryPengumumanId ? "Pilih kategori" : undefined}
+          />
+
+          <Button onClick={handleSubmit}>Edit pengumuman</Button>
+        </Stack>
       </Paper>
-   </Box>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/[id]/page.tsx

@@ -1,40 +1,46 @@
 'use client'
 
-import { Box, Button, Paper } from '@mantine/core';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 
 import colors from '@/con/colors';
+import { useProxy } from 'valtio/utils';
+import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
+import { useState } from 'react';
+import { useShallowEffect } from '@mantine/hooks';
+import { useParams } from 'next/navigation';
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 
 
 function DetailPengumuman() {
-  // const pengumumanState = useProxy(stateDesaPengumuman)
+  const pengumumanState = useProxy(stateDesaPengumuman)
-  // const [modalHapus, setModalHapus] = useState(false)
+  const [modalHapus, setModalHapus] = useState(false)
-  // const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
-  // const params = useParams()
+  const params = useParams()
   const router = useRouter()
 
-  // useShallowEffect(() => {
+  useShallowEffect(() => {
-  //   pengumumanState.pengumuman.findUnique.load(params?.id as string)
+    pengumumanState.pengumuman.findUnique.load(params?.id as string)
-  // }, [])
+  }, [])
 
 
-  // const handleHapus = () => {
+  const handleHapus = () => {
-  //   if (selectedId) {
+    if (selectedId) {
-  //     pengumumanState.pengumuman.delete.byId(selectedId)
+      pengumumanState.pengumuman.delete.byId(selectedId)
-  //     setModalHapus(false)
+      setModalHapus(false)
-  //     setSelectedId(null)
+      setSelectedId(null)
-  //     router.push("/admin/desa/pengumuman")
+      router.push("/admin/desa/pengumuman/list-pengumuman")
-  //   }
+    }
-  // }
+  }
 
-  // if (!pengumumanState.pengumuman.findUnique.data) {
+  if (!pengumumanState.pengumuman.findUnique.data) {
-  //   return (
+    return (
-  //     <Stack py={10}>
+      <Stack py={10}>
-  //         <Skeleton h={400} />
+        <Skeleton h={400} />
-  //     </Stack>
+      </Stack>
-  //   )
+    )
-  // }
+  }
 
   return (
     <Box>
@@ -44,7 +50,7 @@ function DetailPengumuman() {
         </Button>
       </Box>
       <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        {/* <Stack>
+        <Stack>
           <Text fz={"xl"} fw={"bold"}>Detail Pengumuman</Text>
           {pengumumanState.pengumuman.findUnique.data ? (
             <Paper key={pengumumanState.pengumuman.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
@@ -79,11 +85,11 @@ function DetailPengumuman() {
                     <IconX size={20} />
                   </Button>
                   <Button
-                   onClick={() => {
+                    onClick={() => {
-                    if (pengumumanState.pengumuman.findUnique.data) {
+                      if (pengumumanState.pengumuman.findUnique.data) {
-                      router.push(`/admin/desa/pengumuman/${pengumumanState.pengumuman.findUnique.data.id}/edit`);
+                        router.push(`/admin/desa/pengumuman/list-pengumuman/${pengumumanState.pengumuman.findUnique.data.id}/edit`);
-                    }
+                      }
-                   }}
+                    }}
                     disabled={!pengumumanState.pengumuman.findUnique.data}
                     color={"green"}
                   >
@@ -93,16 +99,16 @@ function DetailPengumuman() {
               </Stack>
             </Paper>
           ) : null}
-        </Stack> */}
+        </Stack>
       </Paper>
 
-      {/* Modal Konfirmasi Hapus
+      {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus berita ini?'
+        text='Apakah anda yakin ingin menghapus pengumuman ini?'
-      /> */}
+      />
     </Box>
   );
 }

src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/create/page.tsx

@@ -4,7 +4,6 @@ import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman'
 import colors from '@/con/colors';
 import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { Prisma } from '@prisma/client';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
@@ -14,10 +13,14 @@ function CreatePengumuman() {
   const pengumumanState = useProxy(stateDesaPengumuman)
   const router = useRouter();
 
+  useShallowEffect(() => {
+    pengumumanState.category.findMany.load()
+  }, [])
+
   const handleSubmit = async () => {
     await pengumumanState.pengumuman.create.create()
     resetForm()
-    router.push("/admin/desa/pengumuman")
+    router.push("/admin/desa/pengumuman/list-pengumuman")
   }
 
   const resetForm = () => {
@@ -46,10 +49,21 @@ function CreatePengumuman() {
               pengumumanState.pengumuman.create.form.judul = val.target.value
             }}
           />
-          <SelectCategory
+          <Select
+            label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
+            placeholder='Pilih kategori'
+            data={pengumumanState.category.findMany.data?.map((item) => ({
+              label: item.name,
+              value: item.id,
+            }))}
             onChange={(val) => {
-              pengumumanState.pengumuman.create.form.categoryPengumumanId = val.id;
+              const selected = pengumumanState.category.findMany.data?.find((item) => item.id === val);
+              if (selected) {
+                pengumumanState.pengumuman.create.form.categoryPengumumanId = selected.id;
+              }
             }}
+            searchable
+            nothingFoundMessage="Tidak ditemukan"
           />
           <TextInput
             label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat</Text>}
@@ -77,35 +91,4 @@ function CreatePengumuman() {
   );
 }
 
-function SelectCategory({
-  onChange,
-}: {
-  onChange: (value: Prisma.CategoryPengumumanGetPayload<{ select: { name: true; id: true; } }>) => void;
-}) {
-  const categoryState = useProxy(stateDesaPengumuman.category);
-
-  useShallowEffect(() => {
-    categoryState.findMany.load();
-  }, []);
-
-  return (
-    <Select
-      label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
-      placeholder='Pilih kategori'
-      data={categoryState.findMany.data?.map((item) => ({
-        label: item.name,
-        value: item.id,
-      }))}
-      onChange={(val) => {
-        const selected = categoryState.findMany.data?.find((item) => item.id === val);
-        if (selected) {
-          onChange(selected);
-        }
-      }}
-      searchable
-      nothingFoundMessage="Tidak ditemukan"
-    />
-  );
-}
-
 export default CreatePengumuman;

src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/page.tsx

@@ -1,13 +1,12 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Grid, GridCol, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { useProxy } from 'valtio/utils';
 import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import stateDesaPengumuman from '../../../_state/desa/pengumuman';
 
 
@@ -30,31 +29,21 @@ function Pengumuman() {
 function ListPengumuman({ search }: { search: string }) {
   const pengumumanState = useProxy(stateDesaPengumuman)
   const router = useRouter()
-  const [modalHapus, setModalHapus] = useState(false)
+  const {
-  const [selectedId, setSelectedId] = useState<string | null>(null)
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = pengumumanState.pengumuman.findMany;
 
   useShallowEffect(() => {
-    pengumumanState.pengumuman.findMany.load()
+    load(page, 10, search)
-  }, [])
+  }, [page, search])
 
+  const filteredData = (data || [])
 
-  const handleHapus = () => {
+  if (loading || !data) {
-    if (selectedId) {
-      pengumumanState.pengumuman.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-    }
-  }
-
-  const filteredData = (pengumumanState.pengumuman.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.judul.toLowerCase().includes(keyword) ||
-      item.CategoryPengumuman?.name.toLowerCase().includes(keyword)
-    );
-  });
-
-  if (!pengumumanState.pengumuman.findMany.data) {
     return (
       <Stack py={10}>
         <Skeleton h={500} />
@@ -71,7 +60,7 @@ function ListPengumuman({ search }: { search: string }) {
               <Text fz={"xl"} fw={"bold"}>List Pengumuman</Text>
             </GridCol>
             <GridCol span={{ base: 12, md: 1 }}>
-              <Button onClick={() => router.push("/admin/desa/pengumuman/create")} bg={colors['blue-button']}>
+              <Button onClick={() => router.push("/admin/desa/pengumuman/list-pengumuman/create")} bg={colors['blue-button']}>
                 <IconCircleDashedPlus size={25} />
               </Button>
             </GridCol>
@@ -96,7 +85,7 @@ function ListPengumuman({ search }: { search: string }) {
                   </TableTd>
                   <TableTd >{item.CategoryPengumuman?.name}</TableTd>
                   <TableTd>
-                    <Button bg={"green"} onClick={() => router.push(`/admin/desa/pengumuman/detail`)}>
+                    <Button bg={"green"} onClick={() => router.push(`/admin/desa/pengumuman/list-pengumuman/${item.id}`)}>
                       <IconDeviceImacCog size={25} />
                     </Button>
                   </TableTd>
@@ -107,14 +96,15 @@ function ListPengumuman({ search }: { search: string }) {
           </Box>
         </Stack>
       </Paper>
-
+      <Center>
-      {/* Modal Konfirmasi Hapus */}
+        <Pagination
-      <ModalKonfirmasiHapus
+          value={page}
-        opened={modalHapus}
+          onChange={(newPage) => load(newPage)}
-        onClose={() => setModalHapus(false)}
+          total={totalPages}
-        onConfirm={handleHapus}
+          mt="md"
-        text='Apakah anda yakin ingin menghapus pengumuman ini?'
+          mb="md"
-      />
+        />
+      </Center>
     </Box>
   )
 }

src/app/api/[[...slugs]]/_lib/desa/pengumuman/find-many.ts

@@ -1,23 +1,70 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+async function pengumumanFindMany(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 kategori = (context.query.kategori as string) || ''; // 🔥 Parameter kategori baru
+  const skip = (page - 1) * limit;
+
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Filter berdasarkan kategori (jika ada)
+  if (kategori) {
+    where.CategoryPengumuman = {
+      name: {
+        equals: kategori,
+        mode: 'insensitive' // Tidak case-sensitive
+      }
+    };
+  }
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { judul: { contains: search, mode: 'insensitive' } },
+      { deskripsi: { contains: search, mode: 'insensitive' } },
+      { content: { contains: search, mode: 'insensitive' } },
+      { CategoryPengumuman: { name: { contains: search, mode: 'insensitive' } } }
+    ];
+  }
 
-export default async function pengumumanFindMany() {
   try {
-    const data = await prisma.pengumuman.findMany({
+    // Ambil data dan total count secara paralel
-      where: { isActive: true },
+    const [data, total] = await Promise.all([
-      include: {
+      prisma.pengumuman.findMany({
-        CategoryPengumuman: true,
+        where,
-      },
+        include: {
-    });
+          CategoryPengumuman: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.pengumuman.count({ where }),
+    ]);
+
     return {
       success: true,
-      message: "Success fetch pengumuman",
+      message: "Berhasil ambil pengumuman dengan pagination",
       data,
+      page,
+      limit,
+      total,
+      totalPages: Math.ceil(total / limit),
     };
   } catch (e) {
-    console.error("Find many error:", e);
+    console.error("Error di findMany paginated:", e);
     return {
       success: false,
-      message: "Failed fetch pengumuman",
+      message: "Gagal mengambil data pengumuman",
     };
   }
 }
+
+export default pengumumanFindMany;

src/app/api/[[...slugs]]/_lib/desa/pengumuman/index.ts

@@ -10,7 +10,7 @@ import pengumumanUpdate from "./updt";
 const Pengumuman = new Elysia({ prefix: "/pengumuman", tags: ["Desa/Pengumuman"] })
   .get("/find-many", pengumumanFindMany)
   .get("/:id", pengumumanFindById)
-  .delete("/delete/:id", pengumumanDelete)
+  .delete("/del/:id", pengumumanDelete)
   .post("/create", pengumumanCreate, {
     body: t.Object({
       judul: t.String(),
@@ -23,7 +23,6 @@ const Pengumuman = new Elysia({ prefix: "/pengumuman", tags: ["Desa/Pengumuman"]
   .get("/find-recent", pengumumanFindRecent)
   .put("/:id", pengumumanUpdate, {
     body: t.Object({
-      id: t.String(),
       judul: t.String(),
       deskripsi: t.String(),
       content: t.String(),

src/app/api/[[...slugs]]/_lib/desa/pengumuman/updt.ts

@@ -3,37 +3,75 @@ import { Prisma } from "@prisma/client";
 import { Context } from "elysia";
 
 type FormUpdate = Prisma.PengumumanGetPayload<{
-    select: {
+  select: {
-        id: true;
+    id: true;
-        judul: true;
+    judul: true;
-        deskripsi: true;
+    deskripsi: true;
-        content: true;
+    content: true;
-        categoryPengumumanId: true;
+    categoryPengumumanId: true;
-        imageId: true;
+  };
-    };
 }>;
 
 async function pengumumanUpdate(context: Context) {
-    const body = context.body as FormUpdate;
+  try {
-
+    const id = context.params?.id as string; // ambil dari URL
-    await prisma.pengumuman.update({
+    const body = (await context.body) as Omit<FormUpdate, "id">;
-        where: { id: body.id },
+  
-        data: {
+    const {
-            judul: body.judul,
+      judul,
-            deskripsi: body.deskripsi,
+      deskripsi,
-            content: body.content,
+      content,
-            categoryPengumumanId: body.categoryPengumumanId,
+      categoryPengumumanId,
-        },
+    } = body;
+  
+    if (!id) {
+      return new Response(
+        JSON.stringify({ success: false, message: "ID tidak boleh kosong" }),
+        { status: 400, headers: { 'Content-Type': 'application/json' } }
+      );
+    }
+  
+    const existing = await prisma.pengumuman.findUnique({
+      where: { id },
+      include: {
+        CategoryPengumuman: true,
+      },
     });
-
+  
-    return {
+    if (!existing) {
+      return new Response(
+        JSON.stringify({ success: false, message: "pengumuman tidak ditemukan" }),
+        { status: 404, headers: { 'Content-Type': 'application/json' } }
+      );
+    }
+  
+    const updated = await prisma.pengumuman.update({
+      where: { id },
+      data: {
+        judul,
+        deskripsi,
+        content,
+        categoryPengumumanId: categoryPengumumanId || null,
+      },
+    });
+  
+    return new Response(
+      JSON.stringify({
         success: true,
-        message: "Success update pengumuman",
+        message: "pengumuman berhasil diupdate",
-        data: {
+        data: updated,
-            ...body,
+      }),
-        },
+      { status: 200, headers: { 'Content-Type': 'application/json' } }
-    };
+    );
+  } catch (error) {
+    console.error("Error updating pengumuman:", error); 
+    return new Response(
+      JSON.stringify({
+        success: false,
+        message: "Terjadi kesalahan saat mengupdate pengumuman",
+      }),
+      { status: 500, headers: { 'Content-Type': 'application/json' } }
+    );
+  }
 }
-
+  export default pengumumanUpdate;
-export default pengumumanUpdate;
-