From a65529cb2314fa43fa279e081d8a83ab3760010e Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Fri, 8 Aug 2025 14:31:28 +0800
Subject: [PATCH] Sinkronisasi UI & API Admin - User Submenu Berita

---
 .../admin/(dashboard)/_state/desa/berita.ts   | 24 +++---
 .../desa/berita/list-berita/[id]/page.tsx     |  2 +-
 .../desa/berita/[kategori]/Content.tsx        |  6 +-
 .../desa/berita/[kategori]/[id]/page.tsx      | 78 +++++++++++++++++++
 4 files changed, 95 insertions(+), 15 deletions(-)
 create mode 100644 src/app/darmasaba/(pages)/desa/berita/[kategori]/[id]/page.tsx

diff --git a/src/app/admin/(dashboard)/_state/desa/berita.ts b/src/app/admin/(dashboard)/_state/desa/berita.ts
index 62a88d67..a2b7df23 100644
--- a/src/app/admin/(dashboard)/_state/desa/berita.ts
+++ b/src/app/admin/(dashboard)/_state/desa/berita.ts
@@ -74,9 +74,11 @@ const berita = proxy({
     totalPages: 1,
     loading: false,
     search: "",
-    async load(page = 1, limit = 10, search = "", kategori = "") {
-      this.loading = true;
-      this.page = page;
+   load: async (page = 1, limit = 10, search = "", kategori = "") => {
+      berita.findMany.loading = true; // ✅ Akses langsung via nama path
+      berita.findMany.page = page;
+      berita.findMany.search = search;
+  
       try {
         const query: any = { page, limit };
         if (search) query.search = search;
@@ -85,20 +87,20 @@ const berita = proxy({
         const res = await ApiFetch.api.desa.berita["find-many"].get({ query });
     
         if (res.status === 200 && res.data?.success) {
-          this.data = res.data.data ?? [];
-          this.totalPages = res.data.totalPages ?? 1;
+          berita.findMany.data = res.data.data ?? [];
+          berita.findMany.totalPages = res.data.totalPages ?? 1;
         } else {
-          this.data = [];
-          this.totalPages = 1;
+          berita.findMany.data = [];
+          berita.findMany.totalPages = 1;
         }
       } catch (err) {
         console.error("Gagal fetch berita paginated:", err);
-        this.data = [];
-        this.totalPages = 1;
+        berita.findMany.data = [];
+        berita.findMany.totalPages = 1;
       } finally {
-        this.loading = false;
+        berita.findMany.loading = false;
       }
-    }
+    },
   },
 
   findUnique: {
diff --git a/src/app/admin/(dashboard)/desa/berita/list-berita/[id]/page.tsx b/src/app/admin/(dashboard)/desa/berita/list-berita/[id]/page.tsx
index e703fc82..eddfcf02 100644
--- a/src/app/admin/(dashboard)/desa/berita/list-berita/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/desa/berita/list-berita/[id]/page.tsx
@@ -89,7 +89,7 @@ function DetailBerita() {
                   <Button
                     onClick={() => {
                       if (beritaState.berita.findUnique.data) {
-                        router.push(`/admin/desa/berita/${beritaState.berita.findUnique.data.id}/edit`);
+                        router.push(`/admin/desa/berita/list-berita/${beritaState.berita.findUnique.data.id}/edit`);
                       }
                     }}
                     disabled={!beritaState.berita.findUnique.data}
diff --git a/src/app/darmasaba/(pages)/desa/berita/[kategori]/Content.tsx b/src/app/darmasaba/(pages)/desa/berita/[kategori]/Content.tsx
index d1a91663..0749adec 100644
--- a/src/app/darmasaba/(pages)/desa/berita/[kategori]/Content.tsx
+++ b/src/app/darmasaba/(pages)/desa/berita/[kategori]/Content.tsx
@@ -54,7 +54,7 @@ export default function Content({ kategori }: { kategori: string }) {
           <Center><Skeleton h={400} /></Center>
         ) : featured ? (
           <Box mb={50}>
-            <Text fz="h2" fw={700} mb="md">Berita Utama: {kategori}</Text>
+            <Text fz="h2" fw={700} mb="md">Berita Utama</Text>
             <Paper shadow="md" radius="md" withBorder>
               <Grid gutter={0}>
                 <GridCol span={{ base: 12, md: 6 }}>
@@ -90,7 +90,7 @@ export default function Content({ kategori }: { kategori: string }) {
                       <Button
                         variant="light"
                         rightSection={<IconArrowRight size={16} />}
-                        onClick={() => router.push(`/desa/berita/${featured.id}`)}
+                        onClick={() => router.push(`/darmasaba/desa/berita/${kategori}/${featured.id}`)}
                       >
                         Baca Selengkapnya
                       </Button>
@@ -104,7 +104,7 @@ export default function Content({ kategori }: { kategori: string }) {
 
         {/* === Daftar Berita === */}
         <Box mt={50}>
-          <Title order={2} mb="md">Berita {kategori}</Title>
+          <Title order={2} mb="md">Daftar Berita</Title>
           <Divider mb="xl" />
 
           {state.findMany.loading ? (
diff --git a/src/app/darmasaba/(pages)/desa/berita/[kategori]/[id]/page.tsx b/src/app/darmasaba/(pages)/desa/berita/[kategori]/[id]/page.tsx
new file mode 100644
index 00000000..0552714b
--- /dev/null
+++ b/src/app/darmasaba/(pages)/desa/berita/[kategori]/[id]/page.tsx
@@ -0,0 +1,78 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
+import colors from '@/con/colors';
+import { Box, Center, Container, Image, Skeleton, Stack, Text } from '@mantine/core';
+import { useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import BackButton from '../../../layanan/_com/BackButto';
+
+
+
+function Page() {
+  const params = useParams<{ id: string }>();
+  const id = Array.isArray(params.id) ? params.id[0] : params.id;
+  const state = useProxy(stateDashboardBerita.berita)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const loadData = async () => {
+      if (!id) return;
+      try {
+        setLoading(true);
+        await state.findUnique.load(id);
+      } catch (error) {
+        console.error('Error loading data:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadData()
+  }, [id])
+
+  if (loading) {
+    return (
+      <Center>
+        <Skeleton height={500} />
+      </Center>
+    );
+  }
+
+  if (!state.findUnique.data) {
+    return (
+      <Center>
+        <Text>Data tidak ditemukan</Text>
+      </Center>
+    );
+  }
+
+
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
+      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
+      <Container w={{ base: "100%", md: "50%" }} >
+        <Box pb={20}>
+          <Text ta={"center"} fz={"2.4rem"} c={colors["blue-button"]} fw={"bold"}>
+            {state.findUnique.data?.judul}
+          </Text>
+          <Text
+            ta={"center"}
+            fw={"bold"}
+            fz={"1.5rem"}
+          >
+            Informasi dan Pelayanan Administrasi Digital
+          </Text>
+        </Box>
+        <Image src={state.findUnique.data?.image?.link || ''} alt='' w={"100%"} />
+      </Container>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={"xs"}>
+          <Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: state.findUnique.data?.content || '' }} />
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;