Sinkronisasi UI & API Admin - User Submenu Pengumuman

API & UI Admin Menu Desa, Submenu Pengumuman
2025-08-11 14:35:47 +08:00 · 2025-08-11 10:39:06 +08:00
14 changed files with 814 additions and 469 deletions
--- a/src/app/admin/(dashboard)/_state/desa/pengumuman.ts
+++ b/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";
@@ -45,11 +46,15 @@ const category = proxy({
    },
  },
  findMany: {
-    data: [] as Prisma.CategoryPengumumanGetPayload<{
+    data: [] as (Prisma.CategoryPengumumanGetPayload<{
      omit: {
        isActive: true;
      };
-    }>[],
+    }> & {
+      _count: {
+        pengumumans: number;
+      };
+    })[],
    loading: false,
    async load() {
      const res = await ApiFetch.api.desa.kategoripengumuman["findMany"].get();
@@ -110,7 +115,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 +157,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 +177,18 @@ const category = proxy({
      try {
        category.update.loading = true;

-        const response = await fetch(`/api/desa/kategoripengumuman/${this.id}`, {
-          method: "PUT",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            name: this.form.name,
-          }),
-        });
+        const response = await fetch(
+          `/api/desa/kategoripengumuman/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+            }),
+          }
+        );

        if (!response.ok) {
          const errorData = await response.json().catch(() => ({}));
@@ -224,17 +234,15 @@ const templateFormPengumuman = z.object({
  categoryPengumumanId: z.string().nonempty(),
 });

-type PengumumanForm = Prisma.PengumumanGetPayload<{
-  select: {
-    judul: true;
-    deskripsi: true;
-    content: true;
-    categoryPengumumanId: true;
-  };
-}>;
+const defaultForm = {
+  judul: "",
+  deskripsi: "",
+  content: "",
+  categoryPengumumanId: "",
+};
 const pengumuman = proxy({
  create: {
-    form: {} as PengumumanForm,
+    form: { ...defaultForm },
    loading: false,
    async create() {
      const cek = templateFormPengumuman.safeParse(pengumuman.create.form);
@@ -270,11 +278,35 @@ const pengumuman = proxy({
          };
        }>[]
      | null,
-    async load() {
-      const res = await ApiFetch.api.desa.pengumuman["find-many"].get();
-      console.log(res);
-      if (res.status === 200) {
-        pengumuman.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   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 +340,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 +363,9 @@ const pengumuman = proxy({
      }
    },
  },
-  update: {
+  edit: {
    id: "",
-    form: {} as PengumumanForm,
+    form: { ...defaultForm },
    loading: false,

    async load(id: string) {
@@ -349,6 +381,7 @@ const pengumuman = proxy({
            "Content-Type": "application/json",
          },
        });
+
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
@@ -364,20 +397,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);
-        toast.error("Terjadi kesalahan saat mengambil data pengumuman");
-      } finally {
-        pengumuman.update.loading = false;
+        console.error("Error loading pengumuman:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        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 +421,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 +432,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 +461,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<{
--- a/src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/[id]/edit/page.tsx
@@ -1,52 +1,139 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+/* eslint-disable react-hooks/exhaustive-deps */
+"use client";
+
+import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
+import stateDesaPengumuman from "@/app/admin/(dashboard)/_state/desa/pengumuman";
+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'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={30} />
        </Button>
      </Box>
-
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
        <Stack gap={"xs"}>
-          <Title order={4}>Edit Pengumuman</Title>
+          <Title order={3}>Edit pengumuman</Title>
          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
-          placeholder='Masukkan judul'
+            value={formData.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>}
-          placeholder='Masukkan deskripsi singkat'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Tanggal</Text>}
-          placeholder='Masukkan tanggal'
-          />
-           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Waktu</Text>}
-          placeholder='Masukkan waktu'
+            value={formData.deskripsi}
+            onChange={(e) => setFormData({ ...formData, deskripsi: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
          />
          <Box>
-          <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
-          <KeamananEditor
-          showSubmit={false}
-          />
+            <Text fz={"sm"} fw={"bold"}>Konten</Text>
+            <EditEditor
+              value={formData.content}
+              onChange={(htmlContent) => {
+                setFormData((prev) => ({ ...prev, content: htmlContent }));
+                editState.pengumuman.edit.form.content = htmlContent;
+              }}
+            />
          </Box>

-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
+          <Select
+            value={formData.categoryPengumumanId}
+            onChange={(val) => setFormData({ ...formData, categoryPengumumanId: val || "" })}
+            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>
  );
 }

--- a/src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/[id]/page.tsx
+++ b/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 { IconArrowBack } from '@tabler/icons-react';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+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 [modalHapus, setModalHapus] = useState(false)
-  // const [selectedId, setSelectedId] = useState<string | null>(null)
-  // const params = useParams()
+  const pengumumanState = useProxy(stateDesaPengumuman)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
  const router = useRouter()

-  // useShallowEffect(() => {
-  //   pengumumanState.pengumuman.findUnique.load(params?.id as string)
-  // }, [])
+  useShallowEffect(() => {
+    pengumumanState.pengumuman.findUnique.load(params?.id as string)
+  }, [])


-  // const handleHapus = () => {
-  //   if (selectedId) {
-  //     pengumumanState.pengumuman.delete.byId(selectedId)
-  //     setModalHapus(false)
-  //     setSelectedId(null)
-  //     router.push("/admin/desa/pengumuman")
-  //   }
-  // }
+  const handleHapus = () => {
+    if (selectedId) {
+      pengumumanState.pengumuman.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/desa/pengumuman/list-pengumuman")
+    }
+  }

-  // if (!pengumumanState.pengumuman.findUnique.data) {
-  //   return (
-  //     <Stack py={10}>
-  //         <Skeleton h={400} />
-  //     </Stack>
-  //   )
-  // }
+  if (!pengumumanState.pengumuman.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={400} />
+      </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={() => {
-                    if (pengumumanState.pengumuman.findUnique.data) {
-                      router.push(`/admin/desa/pengumuman/${pengumumanState.pengumuman.findUnique.data.id}/edit`);
-                    }
-                   }}
+                    onClick={() => {
+                      if (pengumumanState.pengumuman.findUnique.data) {
+                        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>
  );
 }
--- a/src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/create/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/page.tsx
+++ b/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 [selectedId, setSelectedId] = useState<string | null>(null)
+  const {
+    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 (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) {
+  if (loading || !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>
-
-      {/* Modal Konfirmasi Hapus */}
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus pengumuman ini?'
-      />
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)}
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
    </Box>
  )
 }
--- a/src/app/api/[[...slugs]]/_lib/desa/pengumuman/find-many.ts
+++ b/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({
-      where: { isActive: true },
-      include: {
-        CategoryPengumuman: true,
-      },
-    });
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.pengumuman.findMany({
+        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;
--- a/src/app/api/[[...slugs]]/_lib/desa/pengumuman/index.ts
+++ b/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(),
--- a/src/app/api/[[...slugs]]/_lib/desa/pengumuman/kategori-pengumuman/findMany.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/pengumuman/kategori-pengumuman/findMany.ts
@@ -1,7 +1,15 @@
 import prisma from "@/lib/prisma";

 async function kategoriPengumumanFindMany() {
-  const data = await prisma.categoryPengumuman.findMany();
+  const data = await prisma.categoryPengumuman.findMany({
+    include: {
+      _count: {
+        select: {
+          pengumumans: true
+        }
+      }
+    }
+  });
  return { data };
 }

--- a/src/app/api/[[...slugs]]/_lib/desa/pengumuman/updt.ts
+++ b/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: {
-        id: true;
-        judul: true;
-        deskripsi: true;
-        content: true;
-        categoryPengumumanId: true;
-        imageId: true;
-    };
+  select: {
+    id: true;
+    judul: true;
+    deskripsi: true;
+    content: true;
+    categoryPengumumanId: true;
+  };
 }>;

 async function pengumumanUpdate(context: Context) {
-    const body = context.body as FormUpdate;
-
-    await prisma.pengumuman.update({
-        where: { id: body.id },
-        data: {
-            judul: body.judul,
-            deskripsi: body.deskripsi,
-            content: body.content,
-            categoryPengumumanId: body.categoryPengumumanId,
-        },
+  try {
+    const id = context.params?.id as string; // ambil dari URL
+    const body = (await context.body) as Omit<FormUpdate, "id">;
+  
+    const {
+      judul,
+      deskripsi,
+      content,
+      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",
-        data: {
-            ...body,
-        },
-    };
+        message: "pengumuman berhasil diupdate",
+        data: updated,
+      }),
+      { 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;
--- a/src/app/darmasaba/(pages)/desa/pengumuman/(penting)/jadwal-rapat/page.tsx
+++ b/src/app/darmasaba/(pages)/desa/pengumuman/(penting)/jadwal-rapat/page.tsx
@@ -1,65 +0,0 @@
-import colors from '@/con/colors';
-import { Calendar } from '@mantine/dates';
-import { Stack, Box, Container, Text, Grid, Paper, GridCol, Center, SimpleGrid } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../../layanan/_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
-      {/* Header */}
-      <Box px={{ base: "md", md: 100 }}>
-        <BackButton />
-      </Box>
-      <Container size="lg" px="md" >
-        <Stack gap="0" >
-          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" >
-            Jadwal Rapat
-          </Text>
-        </Stack>
-      </Container>
-      <Box px={{ base: 'md', md: 100 }}>
-        <Grid>
-          <GridCol span={{ base: 12, md: 6, lg: 5, xl: 4 }} >
-            <Paper bg={colors['white-1']} p={'md'}>
-              <Center>
-                <Calendar size='xl' />
-              </Center>
-            </Paper>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 6, lg: 7, xl: 8 }} >
-            <Paper bg={colors['white-1']} p={'md'}>
-              <SimpleGrid
-                cols={{
-                  base: 1,
-                  xl: 3,
-              }}
-              >
-                <Box>
-                  <Text fz={'lg'} fw={'bold'} c={colors['blue-button']}>Hari Ini</Text>
-                  <Text fz={'lg'} >Senin, 13 Februari 2023</Text>
-                  <Text fz={'lg'} >09:00 - 12:00</Text>
-                  <Text fz={'lg'} >12:00 - 15:00</Text>
-                </Box>
-                <Box>
-                  <Text fz={'lg'} fw={'bold'} c={colors['blue-button']}>Besok</Text>
-                  <Text fz={'lg'} >Selasa, 14 Februari 2023</Text>
-                  <Text fz={'lg'} >09:00 - 12:00</Text>
-                  <Text fz={'lg'} >12:00 - 15:00</Text>
-                </Box>
-                <Box>
-                  <Text fz={'lg'} fw={'bold'} c={colors['blue-button']}>Minggu Depan</Text>
-                  <Text fz={'lg'} >Senin, 20 Februari 2023</Text>
-                  <Text fz={'lg'} >09:00 - 12:00</Text>
-                  <Text fz={'lg'} >12:00 - 15:00</Text>
-                </Box>
-              </SimpleGrid>
-            </Paper>
-          </GridCol>
-        </Grid>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;
--- a/src/app/darmasaba/(pages)/desa/pengumuman/(penting)/pendaftaran-umkm/page.tsx
+++ b/src/app/darmasaba/(pages)/desa/pengumuman/(penting)/pendaftaran-umkm/page.tsx
@@ -1,49 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Box, Container, Text, Image, Grid, GridCol, Paper, TextInput, Center, Button } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../../layanan/_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
-      {/* Header */}
-      <Box px={{ base: "md", md: 100 }}>
-        <BackButton />
-      </Box>
-      <Container size="lg" px="md" >
-        <Stack gap="0" >
-          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" >
-            Pendaftaran UMKM
-          </Text>
-        </Stack>
-      </Container>
-      <Box px={{ base: 'md', md: 100 }}>
-        <Grid>
-          <GridCol span={{ base: 12, md: 6, lg: 7, xl: 8 }}>
-            <Center>
-              <Image src={'/api/img/market.png'} w={{ base: 300, md: 500, lg: 530, xl: 550 }} alt='' />
-            </Center>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 6, lg: 5, xl: 4 }}>
-            <Paper bg={colors['white-1']} p={'md'} h={'500'}>
-              <Text ta={'center'} fz={{ base: "1.5rem", md: "2rem" }} c={colors["blue-button"]} fw="bold" >
-                Pendaftaran UMKM
-              </Text>
-              <Stack pt={20}>
-                <TextInput placeholder='Nama Lengkap' />
-                <TextInput placeholder='Alamat' />
-                <TextInput placeholder='No. Telepon' />
-                <TextInput placeholder='Email' />
-                <TextInput placeholder='Nama UMKM' />
-                <Button bg={colors['blue-button']} fullWidth>Daftar Sekarang</Button>
-              </Stack>
-            </Paper>
-
-          </GridCol>
-        </Grid>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;
--- a/src/app/darmasaba/(pages)/desa/pengumuman/[name]/[id]/page.tsx
+++ b/src/app/darmasaba/(pages)/desa/pengumuman/[name]/[id]/page.tsx
@@ -0,0 +1,61 @@
+'use client'
+import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
+import colors from '@/con/colors';
+import { Box, Container, Flex, Group, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useParams } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import BackButton from '../../../layanan/_com/BackButto';
+
+function Page() {
+  const detail = useProxy(stateDesaPengumuman.pengumuman.findUnique)
+
+  const params = useParams()
+
+  useShallowEffect(() => {
+    stateDesaPengumuman.pengumuman.findUnique.load(params?.id as string)
+  }, [])
+
+  if (!detail.data) {
+    return (
+      <Box>
+        <Skeleton h={400} />
+      </Box>
+    )
+  }
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
+      {/* Header */}
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container size="lg" px="md">
+        <Stack gap="xs" >
+            <Flex justify={"space-between"} align={"center"}>
+              <Text fz={{ base: "2rem", md: "2rem" }} c={colors["blue-button"]} fw="bold" >
+                {detail.data?.judul}
+              </Text>
+              <Group justify='end'>
+                <Paper bg={colors['blue-button']} p={5}>
+                  <Text  c={colors['white-1']}>{detail.data?.CategoryPengumuman?.name}</Text>
+                </Paper>
+              </Group>
+            </Flex>
+          <Paper bg={colors["white-1"]} p="md">
+            <Text fz={"md"} dangerouslySetInnerHTML={{ __html: detail.data?.content }} />
+            <Text fz={"md"} c={colors["blue-button"]} fw="bold" >
+              {new Date(detail.data?.createdAt).toLocaleDateString('id-ID', {
+                weekday: 'long',
+                day: 'numeric',
+                month: 'long',
+                year: 'numeric'
+              })}
+            </Text>
+          </Paper>
+        </Stack>
+      </Container>
+    </Stack>
+  );
+}
+
+export default Page;
--- a/src/app/darmasaba/(pages)/desa/pengumuman/[name]/page.tsx
+++ b/src/app/darmasaba/(pages)/desa/pengumuman/[name]/page.tsx
@@ -0,0 +1,73 @@
+'use client'
+/* eslint-disable react-hooks/exhaustive-deps */
+import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
+import colors from '@/con/colors';
+import { Box, Container, Group, Paper, Stack, Text } from '@mantine/core';
+import { IconCalendar } from '@tabler/icons-react';
+import { useProxy } from 'valtio/utils';
+import BackButton from '../../layanan/_com/BackButto';
+import { useEffect } from 'react';
+import { useParams } from 'next/navigation';
+
+
+function Page() {
+  const unwrappedParams = useParams();
+  const kategoriState = useProxy(stateDesaPengumuman);
+  const categoryName = decodeURIComponent(unwrappedParams.name as string);
+
+  useEffect(() => {
+    kategoriState.category.findUnique.load(categoryName);
+    kategoriState.pengumuman.findMany.load(1, 10, '', categoryName);
+  }, [categoryName]);
+
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
+      {/* Header */}
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container size="lg" px="md" >
+        <Stack align="center" gap="0" >
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+            {categoryName.split('-').map(word => 
+              word.charAt(0).toUpperCase() + word.slice(1)
+            ).join(' ')}
+          </Text>
+          <Text ta="center" px="md" pb={10}>
+            Informasi dan pengumuman resmi terkait {categoryName.split('-').join(' ')}
+          </Text>
+        </Stack>
+      </Container>
+      <Box px={{ base: 'md', md: 100 }}>
+        {!kategoriState.pengumuman.findMany.data?.length ? (
+          <Paper p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
+            Tidak ada pengumuman yang ditemukan
+          </Paper>
+        ) : kategoriState.pengumuman.findMany.data?.map((v, k) => {
+          return (
+            <Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
+              <Text fz={'h3'}>{v.judul}</Text>
+              <Group style={{ color: 'black' }} pb={20}>
+                <Group gap="xs">
+                  <IconCalendar size={18} />
+                  <Text size="sm">
+                    {v.createdAt ? new Date(v.createdAt).toLocaleDateString('id-ID', {
+                      day: 'numeric',
+                      month: 'long',
+                      year: 'numeric',
+                    }) : 'No date available'}
+                  </Text>
+                </Group>
+              </Group>
+              <Text ta={'justify'}>
+                {v.deskripsi}
+              </Text>
+            </Paper>
+          )
+        })}
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;
--- a/src/app/darmasaba/(pages)/desa/pengumuman/page.tsx
+++ b/src/app/darmasaba/(pages)/desa/pengumuman/page.tsx
@@ -1,171 +1,299 @@
+'use client';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable react-hooks/exhaustive-deps */
+import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
 import colors from '@/con/colors';
-import { Anchor, Box, Container, Flex, Group, Notification, Paper, SimpleGrid, Stack, Text, TextInput, UnstyledButton } from '@mantine/core';
+import {
+  Anchor,
+  Box,
+  Center,
+  Container,
+  Divider,
+  Flex,
+  Grid,
+  GridCol,
+  Group,
+  Notification,
+  Pagination,
+  Paper,
+  SimpleGrid,
+  Skeleton,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  UnstyledButton,
+} from '@mantine/core';
 import { IconCalendar, IconClock, IconSearch } from '@tabler/icons-react';
-import BackButton from '../layanan/_com/BackButto';
+import { useTransitionRouter } from 'next-view-transitions';
 import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import BackButton from '../layanan/_com/BackButto';

-const dataKategori = [
-  {
-    id: 1,
-    kategori: 'Sosial & Kesehatan',
-    jumlah: 5,
-    link: '/darmasaba/desa/pengumuman/sosial-&-kesehatan'
-  },
-  {
-    id: 2,
-    kategori: 'Ekonomi & UMKM',
-    jumlah: 7,
-    link: '/darmasaba/desa/pengumuman/ekonomi-&-umkm'
-  },
-  {
-    id: 3,
-    kategori: 'Pendidikan & Kepemudaan',
-    jumlah: 9,
-    link: '/darmasaba/desa/pengumuman/pendidikan-&-kepemudaan'
-  },
-  {
-    id: 4,
-    kategori: 'Lingkungan & Bencana',
-    jumlah: 6,
-    link: '/darmasaba/desa/pengumuman/lingkungan-&-bencana'
-  },
-  {
-    id: 5,
-    kategori: 'Adat & Budaya',
-    jumlah: 8,
-    link: '/darmasaba/desa/pengumuman/adat-&-budaya'
-  },
-  {
-    id: 6,
-    kategori: 'Digitalisasi Desa',
-    jumlah: 6,
-    link: '/darmasaba/desa/pengumuman/digitalisasi-desa'
-  },
-]
-const dataPenting = [
-  {
-    id: 1,
-    judul: 'Jadwal Rapat',
-    jumlah: 5,
-    link: '/darmasaba/desa/pengumuman/jadwal-rapat'
-  },
-  {
-    id: 2,
-    judul: 'Pendaftaran UMKM',
-    jumlah: 7,
-    link: '/darmasaba/desa/pengumuman/pendaftaran-umkm'
-  }
-]
 function Page() {
+  const router = useTransitionRouter();
+
+  // State lokal
+  const [search, setSearch] = useState('');
+  const [searchInput, setSearchInput] = useState('');
+  const [page, setPage] = useState(1);
+
+  const state = useProxy(stateDesaPengumuman.pengumuman);
+  const totalPages = state.findMany.totalPages || 1;
+  const recent = useProxy(stateDesaPengumuman.pengumuman.findRecent);
+
+  // ✅ Baca URL saat pertama kali mount
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const urlSearch = urlParams.get('search') || '';
+    const urlPage = parseInt(urlParams.get('page') || '1');
+
+    setSearch(urlSearch);
+    setSearchInput(urlSearch);
+    setPage(Math.max(1, urlPage)); // Pastikan page >= 1
+  }, []);
+
+  // ✅ Sinkronkan URL saat `search` atau `page` berubah
+  useEffect(() => {
+    const url = new URL(window.location.href);
+    if (search) {
+      url.searchParams.set('search', search);
+    } else {
+      url.searchParams.delete('search');
+    }
+    if (page > 1) {
+      url.searchParams.set('page', page.toString());
+    } else {
+      url.searchParams.delete('page');
+    }
+    router.replace(url.toString());
+  }, [search, page, router]);
+
+  // ✅ Debounce untuk pencarian
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      if (searchInput !== search) {
+        setSearch(searchInput);
+        setPage(1); // Reset ke halaman 1 saat pencarian baru
+      }
+    }, 500);
+
+    return () => clearTimeout(timeoutId);
+  }, [searchInput, search]);
+
+  // ✅ Load data dari state (valtio)
+  useEffect(() => {
+    stateDesaPengumuman.category.findMany.load();
+    stateDesaPengumuman.pengumuman.findRecent.load();
+    state.findMany.load(page, 3, search);
+  }, [search, page]); // 🔁 Depend pada `search` dan `page`
+
  return (
    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
      {/* Header */}
-      <Box px={{ base: "md", md: 100 }}>
+      <Box px={{ base: 'md', md: 100 }}>
        <BackButton />
      </Box>
+
      <Container size="lg" px="md">
-        <Stack align="center" gap="0" >
-          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+        <Stack align="center" gap="0">
+          <Text fz={{ base: '2rem', md: '3.4rem' }} c={colors['blue-button']} fw="bold" ta="center">
            Pengumuman Desa Darmasaba
          </Text>
          <Text ta="center" px="md" pb={10}>
            Informasi dan pengumuman resmi terkait kegiatan dan kebijakan Desa Darmasaba
          </Text>
-          <TextInput
-            placeholder='Cari Pengumuman'
-            radius="lg"
-            leftSection={<IconSearch size={20} />}
-            w={{ base: "55%", md: "70%" }}
-          />
        </Stack>
      </Container>

-      <Box px={{ base: "md", md: 100 }}>
-        <SimpleGrid
-          cols={{
-            base: 1,
-            md: 2,
-          }}
-        >
-          <Notification styles={{ title: { fontWeight: "bold" } }} withCloseButton={false} title="Penting">
-            <Stack gap={"xs"}>
-              <Text fz={"sm"} fw={"bold"} c={"black"}>PENGUMUMAN LOWONGAN KERJA TPS3R PUDAK MESARI DESA DARMASABA</Text>
-              <Text ta={"justify"} fz={"sm"} c={"black"}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis nec arcu ac ornare. Praesent a porttitor felis. Proin varius ex nisl, in hendrerit odio tristique vel. </Text>
-            </Stack>
-            <Flex pt={20} gap={"md"} justify={"space-between"}>
-              <Group style={{ color: 'black' }}>
-                <Group gap="xs">
-                  <IconCalendar size={18} />
-                  <Text size="sm">Kamis, 13 Januari 2025</Text>
-                </Group>
-                <Group gap="xs">
-                  <IconClock size={18} />
-                  <Text size="sm">09:00 WITA</Text>
-                </Group>
-              </Group>
-              <Anchor>
-                <Text fs={'unset'} c={colors["blue-button"]} fz={"sm"}>Baca Selengkapnya</Text>
-              </Anchor>
-            </Flex>
-          </Notification>
-          <Paper p={"md"}>
-            <Stack gap={"xs"}>
-              <Text fw={"bold"} fz={"lg"} c={colors['blue-button']}>Kategori</Text>
-              {dataKategori.map((v, k) => {
+      {/* Recent & Kategori */}
+      <Box px={{ base: 'md', md: 100 }}>
+        <SimpleGrid cols={{ base: 1, md: 2 }}>
+          <Stack>
+            {!recent.data?.length ? (
+              <Notification withCloseButton={false} h={100}>
+                Tidak ada pengumuman yang ditemukan
+              </Notification>
+            ) : (
+              recent.data
+                ?.slice(0, 2)
+                .map((item, index) => (
+                  <Notification
+                    key={item.id}
+                    color={index === 0 ? undefined : 'yellow'}
+                    styles={{ title: { fontWeight: 'bold' } }}
+                    withCloseButton={false}
+                    title={item.CategoryPengumuman?.name || 'Pengumuman'}
+                  >
+                    <Stack gap={"xs"}>
+                      <Text fz="sm" fw="bold" c="black" style={{ textTransform: 'uppercase' }}>
+                        {item.judul}
+                      </Text>
+                      <Text ta="justify" fz="sm" c="black" lineClamp={3} dangerouslySetInnerHTML={{ __html: item.content }} />
+                    </Stack>
+                    <Flex pt={20} gap="md" justify="space-between">
+                      <Group style={{ color: 'black' }}>
+                        <Group gap="xs">
+                          <IconCalendar size={18} />
+                          <Text size="sm">
+                            {new Date(item.createdAt).toLocaleDateString('id-ID', {
+                              weekday: 'long',
+                              day: 'numeric',
+                              month: 'long',
+                              year: 'numeric',
+                            })}
+                          </Text>
+                        </Group>
+                        <Group gap="xs">
+                          <IconClock size={18} />
+                          <Text size="sm">
+                            {new Date(item.createdAt).toLocaleTimeString('id-ID', {
+                              hour: '2-digit',
+                              minute: '2-digit',
+                              timeZoneName: 'short',
+                            })}
+                          </Text>
+                        </Group>
+                      </Group>
+                      <Anchor variant="transparent" href={`/darmasaba/desa/pengumuman/${item.CategoryPengumuman?.name}/${item.id}`}>
+                        <Text fs="unset" c={colors['blue-button']} fz="sm">
+                          Baca Selengkapnya
+                        </Text>
+                      </Anchor>
+                    </Flex>
+                  </Notification>
+                ))
+            )}
+          </Stack>
+
+          <Paper p="md">
+            <Stack gap="xs">
+              <Text fw="bold" fz="lg" c={colors['blue-button']}>
+                Kategori
+              </Text>
+              {stateDesaPengumuman.category.findMany.data?.map((v: any, k) => {
+                const count = v._count?.pengumumans || 0;
                return (
-                  <UnstyledButton component={Link} href={v.link} key={k}>
-                    <Paper bg={colors["BG-trans"]} p={5}>
-                      <Group px={3} justify={"space-between"}>
-                        <Text fz={"md"} c={"black"}>{v.kategori}</Text>
-                        <Text fz={"md"} c={"black"}>{v.jumlah}</Text>
+                  <UnstyledButton component={Link} href={`/darmasaba/desa/pengumuman/${v.name}`} key={k}>
+                    <Paper bg={colors['BG-trans']} p={5}>
+                      <Group px={3} justify="space-between">
+                        <Text fz="md" c="black">
+                          {v.name}
+                        </Text>
+                        <Text fz="md" c="black">
+                          {count}
+                        </Text>
                      </Group>
                    </Paper>
                  </UnstyledButton>
-                )
-              })}
-            </Stack>
-          </Paper>
-          <Notification color='yellow' styles={{ title: { fontWeight: "bold" } }} withCloseButton={false} title="Informasi">
-            <Stack gap={"xs"}>
-              <Text fz={"sm"} fw={"bold"} c={"black"}>LELANG PEMASANGAN CCTV DESA DARMASABA</Text>
-              <Text ta={"justify"} fz={"sm"} c={"black"}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis nec arcu ac ornare. Praesent a porttitor felis. Proin varius ex nisl, in hendrerit odio tristique vel. </Text>
-            </Stack>
-            <Flex pt={20} gap={"md"} justify={"space-between"}><Group style={{ color: 'black' }}>
-              <Group gap="xs">
-                <IconCalendar size={18} />
-                <Text size="sm">Kamis, 2 Februari 2025</Text>
-              </Group>
-              <Group gap="xs">
-                <IconClock size={18} />
-                <Text size="sm">10:00 WITA</Text>
-              </Group>
-            </Group>
-              <Anchor>
-                <Text fs={'unset'} c={colors["blue-button"]} fz={"sm"}>Baca Selengkapnya</Text>
-              </Anchor>
-            </Flex>
-          </Notification>
-          <Paper p={"md"}>
-            <Stack gap={"xs"}>
-              <Text fw={"bold"} fz={"lg"} c={colors['blue-button']}>Pengumuman Penting</Text>
-              {dataPenting.map((v, k) => {
-                return (
-                  <UnstyledButton component={Link} href={v.link} key={k}>
-                    <Paper bg={colors["BG-trans"]} p={5}>
-                      <Group px={3} justify={"space-between"}>
-                        <Text fz={"md"} c={"black"}>{v.judul}</Text>
-                        <Text fz={"md"} c={"black"}>{v.jumlah}</Text>
-                      </Group>
-                    </Paper>
-                  </UnstyledButton>
-                )
+                );
              })}
            </Stack>
          </Paper>
        </SimpleGrid>
      </Box>
+
+      {/* Daftar Pengumuman */}
+      <Box px={{ base: 'md', md: 100 }}>
+        <Stack gap="xs">
+          <Divider mb={10} color={colors['blue-button']} />
+          <Grid>
+            <GridCol span={{ base: 12, md: 8 }}>
+              <Title order={3}>Daftar Pengumuman</Title>
+            </GridCol>
+            <GridCol span={{ base: 12, md: 4 }}>
+              <TextInput
+                placeholder="Cari Pengumuman"
+                radius="lg"
+                leftSection={<IconSearch size={20} />}
+                w="100%"
+                value={searchInput}
+                onChange={(e) => setSearchInput(e.target.value)}
+              />
+            </GridCol>
+          </Grid>
+
+          {/* Loading */}
+          {state.findMany.loading ? (
+            <SimpleGrid cols={{ base: 1, md: 3 }}>
+              {[1, 2, 3].map((i) => (
+                <Skeleton key={i} h={400} />
+              ))}
+            </SimpleGrid>
+          ) : !state.findMany.data?.length ? (
+            <Notification withCloseButton={false} h={100}>
+              Tidak ada pengumuman yang ditemukan
+            </Notification>
+          ) : (
+            <SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg" verticalSpacing="lg">
+              {state.findMany.data.map((item) => (
+                <Paper key={item.id} p="md" withBorder radius="md" h="100%">
+                  <Stack h="100%" justify="space-between">
+                    <div>
+                      <Text fw={600} c={colors['blue-button']} mb={5}>
+                        {item.CategoryPengumuman?.name || 'Pengumuman'}
+                      </Text>
+                      <Text fz="lg" fw={700} mb="sm" lineClamp={2} style={{ textTransform: 'uppercase' }}>
+                        {item.judul}
+                      </Text>
+                      <Text
+                        fz="sm"
+                        c="dimmed"
+                        lineClamp={4}
+                        dangerouslySetInnerHTML={{ __html: item.content }}
+                        mb="md"
+                      />
+                    </div>
+                    <div>
+                      <Group mb="sm" c="dimmed">
+                        <Group gap={5}>
+                          <IconCalendar size={16} />
+                          <Text size="xs">
+                            {new Date(item.createdAt).toLocaleDateString('id-ID', {
+                              day: 'numeric',
+                              month: 'short',
+                              year: 'numeric',
+                            })}
+                          </Text>
+                        </Group>
+                        <Group gap={5}>
+                          <IconClock size={16} />
+                          <Text size="xs">
+                            {new Date(item.createdAt).toLocaleTimeString('id-ID', {
+                              hour: '2-digit',
+                              minute: '2-digit',
+                            })}
+                          </Text>
+                        </Group>
+                      </Group>
+                      <Anchor variant="transparent" href={`/darmasaba/desa/pengumuman/${item.CategoryPengumuman?.name}/${item.id}`}>
+                        <Text fw={600} c={colors['blue-button']} size="sm">
+                          Baca Selengkapnya →
+                        </Text>
+                      </Anchor>
+                    </div>
+                  </Stack>
+                </Paper>
+              ))}
+            </SimpleGrid>
+          )}
+
+          {/* Pagination */}
+          <Center mt="xl">
+            <Pagination
+              total={totalPages}
+              value={page}
+              onChange={setPage}
+              siblings={1}
+              boundaries={1}
+              withEdges
+            />
+          </Center>
+        </Stack>
+      </Box>
    </Stack>
  );
 }

-export default Page;
+export default Page;
Author	SHA1	Message	Date
nico	2fe8b8ce1a	Sinkronisasi UI & API Admin - User Submenu Pengumuman	2025-08-11 14:35:47 +08:00
nico	5cbf7810bc	API & UI Admin Menu Desa, Submenu Pengumuman	2025-08-11 10:39:06 +08:00