From 0e55462adc8d0769f4deda243569a24291023be1 Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Mon, 4 Aug 2025 16:28:53 +0800
Subject: [PATCH] Sinkronisasi UI Admin & User Menu Landing Page, submenu
 Prestasi Desa

---
 prisma/data/landing-page/apbdes/apbdes.json   |  22 +++
 .../prestasi-desa/kategori-prestasi.json      |  14 ++
 .../prestasi-desa/prestasi-desa.json          |  20 +++
 prisma/seed.ts                                |  42 +++++
 .../prestasi-desa/list-prestasi-desa/page.tsx |   6 +-
 .../page.tsx                                  |  64 --------
 .../page.tsx                                  |  64 --------
 .../page.tsx                                  |  62 --------
 .../(tambahan)/prestasi-desa/[id]/page.tsx    | 147 ++++++++++++++++++
 .../(tambahan)/prestasi-desa/page.tsx         |  84 ++++++----
 .../_com/main-page/prestasi/index.tsx         | 139 +++++++++--------
 11 files changed, 372 insertions(+), 292 deletions(-)
 create mode 100644 prisma/data/landing-page/apbdes/apbdes.json
 create mode 100644 prisma/data/landing-page/prestasi-desa/kategori-prestasi.json
 create mode 100644 prisma/data/landing-page/prestasi-desa/prestasi-desa.json
 delete mode 100644 src/app/darmasaba/(tambahan)/prestasi-desa/(detail)/peringkat-5-dalam-ajang-bergengsi-mangupura-award/page.tsx
 delete mode 100644 src/app/darmasaba/(tambahan)/prestasi-desa/(detail)/prestasi-juara-3-dalam-lomba-keluarga-sadar-hukum-kabupaten-badung-tahun-2024/page.tsx
 delete mode 100644 src/app/darmasaba/(tambahan)/prestasi-desa/(detail)/tim-bola-voli-putri-dharma-temaja-meraih-juara-3-dalam-turnamen-bola-voli-mangupura-cup-2024-kategori-putri-se-bali/page.tsx
 create mode 100644 src/app/darmasaba/(tambahan)/prestasi-desa/[id]/page.tsx

diff --git a/prisma/data/landing-page/apbdes/apbdes.json b/prisma/data/landing-page/apbdes/apbdes.json
new file mode 100644
index 00000000..15ab0242
--- /dev/null
+++ b/prisma/data/landing-page/apbdes/apbdes.json
@@ -0,0 +1,22 @@
+[
+    {
+        "id": "cmdwq7qp60008vntw67s4j6sq",
+        "name": "Pembiayaan",
+        "jumlah": "295 M"
+    },
+    {
+        "id": "cmdwpsprc0003vntw9o4d33dr",
+        "name": "Pendapatan",
+        "jumlah": "495 M"
+    },
+    {
+        "id": "cmdwqe8xl000cvntwcuqpvdhp",
+        "name": "Belanja",
+        "jumlah": "395 M"
+    },
+    {
+        "id": "cmdwqq4b6000gvntwm07rinx4",
+        "name": "Pangan",
+        "jumlah": "285 M"
+    }
+]
\ No newline at end of file
diff --git a/prisma/data/landing-page/prestasi-desa/kategori-prestasi.json b/prisma/data/landing-page/prestasi-desa/kategori-prestasi.json
new file mode 100644
index 00000000..47791c6d
--- /dev/null
+++ b/prisma/data/landing-page/prestasi-desa/kategori-prestasi.json
@@ -0,0 +1,14 @@
+[
+    {
+        "id": "cmdwrolsl0000vnd3e24q5440",
+        "name": "Olahraga dan Kepemudaan"
+    },
+    {
+        "id": "cmdwrot900001vnd30b5kj96g",
+        "name": "Hukum dan Kesadaran Masyarakat"
+    },
+    {
+        "id": "cmdwrp0pr0002vnd35w6nkjh0",
+        "name": "Tata Kelola dan Inovasi Desa"
+    }
+]
\ No newline at end of file
diff --git a/prisma/data/landing-page/prestasi-desa/prestasi-desa.json b/prisma/data/landing-page/prestasi-desa/prestasi-desa.json
new file mode 100644
index 00000000..f9d9bff7
--- /dev/null
+++ b/prisma/data/landing-page/prestasi-desa/prestasi-desa.json
@@ -0,0 +1,20 @@
+[
+    {
+        "id": "cmdwrrxkh0005vnd3p5rxkiev",
+        "name": "Tim Bola Voli Putri Dharma Temaja meraih juara 3 dalam Turnamen Bola Voli Mangupura Cup 2024 kategori Putri Se-Bali",
+        "deskripsi": "<p>Tim Bola Voli Putri Dharma Temaja meraih juara 3 dalam Turnamen Bola Voli Mangupura Cup 2024 kategori Putri Se-Bali</p>",
+        "kategoriId": "cmdwrolsl0000vnd3e24q5440"
+    },
+    {
+        "id": "cmdwrzs740008vnd329ysez5x",
+        "name": "Prestasi Juara 3 dalam Lomba Keluarga Sadar Hukum Kabupaten Badung Tahun 2024",
+        "deskripsi": "<p>Prestasi Juara 3 dalam Lomba Keluarga Sadar Hukum Kabupaten Badung Tahun 2024</p>",
+        "kategoriId": "cmdwrot900001vnd30b5kj96g"
+    },
+    {
+        "id": "cmdws0sgq000bvnd32o7m94im",
+        "name": "Peringkat 5 Dalam Ajang Bergengsi Mangupura Award",
+        "deskripsi": "<p>Peringkat 5 Dalam Ajang Bergengsi Mangupura Award</p>",
+        "kategoriId": "cmdwrp0pr0002vnd35w6nkjh0"
+    }
+]
\ No newline at end of file
diff --git a/prisma/seed.ts b/prisma/seed.ts
index b08e2f6e..bfcacb19 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -2,6 +2,8 @@ import prisma from "@/lib/prisma";
 import profilePejabatDesa from "./data/landing-page/profile/profile.json";
 import programInovasi from "./data/landing-page/profile/programInovasi.json";
 import mediaSosial from "./data/landing-page/profile/mediaSosial.json";
+import sdgsDesa from "./data/landing-page/sdgs-desa/sdgs-desa.json";
+import apbdes from "./data/landing-page/apbdes/apbdes.json";
 import categoryPengumuman from "./data/category-pengumuman.json";
 import kategoriBerita from "./data/kategori-berita.json";
 import caraMemperolehInformasi from "./data/list-caraMemperolehInformasi.json";
@@ -115,6 +117,46 @@ import pegawaiPPID from "./data/ppid/struktur-ppid/pegawai-PPID.json";
 
   console.log("layanan success ...");
 
+  // =========== SDGSDesa ===========
+  for (const l of sdgsDesa) {
+    await prisma.sDGSDesa.upsert({
+      where: {
+        name: l.name,
+        jumlah: l.jumlah,
+      },
+      update: {
+        name: l.name,
+        jumlah: l.jumlah,
+      },
+      create: {
+        name: l.name,
+        jumlah: l.jumlah,
+      },
+    });
+  }
+
+  console.log("sdgs desa success ...");
+
+  // =========== APBDes ===========
+  for (const l of apbdes) {
+    await prisma.aPBDes.upsert({
+      where: {
+        name: l.name,
+        jumlah: l.jumlah,
+      },
+      update: {
+        name: l.name,
+        jumlah: l.jumlah,
+      },
+      create: {
+        name: l.name,
+        jumlah: l.jumlah,
+      },
+    });
+  }
+
+  console.log("sdgs desa success ...");
+
   for (const l of sejarahDesa) {
     await prisma.sejarahDesa.upsert({
       where: {
diff --git a/src/app/admin/(dashboard)/landing-page/prestasi-desa/list-prestasi-desa/page.tsx b/src/app/admin/(dashboard)/landing-page/prestasi-desa/list-prestasi-desa/page.tsx
index 3566818f..723bbcd6 100644
--- a/src/app/admin/(dashboard)/landing-page/prestasi-desa/list-prestasi-desa/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/prestasi-desa/list-prestasi-desa/page.tsx
@@ -77,8 +77,10 @@ function ListPrestasi({ search }: { search: string }) {
                         <Text truncate="end" fz={"sm"}>{item.name}</Text>
                       </Box>
                     </TableTd>
-                    <TableTd>
-                      <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                    <TableTd >
+                      <Box w={150}>
+                        <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                      </Box>
                     </TableTd>
                     <TableTd>{item.kategori?.name}</TableTd>
                     <TableTd>
diff --git a/src/app/darmasaba/(tambahan)/prestasi-desa/(detail)/peringkat-5-dalam-ajang-bergengsi-mangupura-award/page.tsx b/src/app/darmasaba/(tambahan)/prestasi-desa/(detail)/peringkat-5-dalam-ajang-bergengsi-mangupura-award/page.tsx
deleted file mode 100644
index 5db5b12a..00000000
--- a/src/app/darmasaba/(tambahan)/prestasi-desa/(detail)/peringkat-5-dalam-ajang-bergengsi-mangupura-award/page.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
-import colors from '@/con/colors';
-import { Stack, Container, Box, Text, Image, ActionIcon, Divider, Flex } from '@mantine/core';
-import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from '@tabler/icons-react';
-import React from 'react';
-
-
-function Page() {
-  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={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} c={colors["blue-button"]} fw={"bold"}>
-            Peringkat 5 Dalam Ajang Bergengsi Mangupura Award
-          </Text>
-          <Text
-            ta={"center"}
-            fw={"bold"}
-            fz={"1.5rem"}
-          >
-            Tata Kelola dan Inovasi Desa
-          </Text>
-        </Box>
-        <Image src="/api/img/prestasi-peringkat-5.jpeg" alt='' w={"100%"} />
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Pada hari Senin, 18 November 2024, Desa Darmasaba kembali mencetak prestasi gemilang dengan meraih peringkat V dalam ajang bergengsi Mangupura Award. Penganugerahan ini berlangsung dalam rangkaian acara HUT Kota Mangupura ke-15 yang dihadiri oleh Drs. I Ketut Suiasa, S.H., Plt Bupati Badung, serta para tokoh penting lainnya.
-        </Text>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Penghargaan ini bukan hanya sebuah pengakuan, tetapi juga menjadi motivasi bagi Desa Darmasaba untuk terus meningkatkan inovasi, pelayanan, pembangunan serta transformasi digital.
-          Mari bersama kita lanjutkan semangat kolaborasi dan inovasi untuk menjadikan Darmasaba sebagai desa yang semakin unggul dan inspiratif!
-        </Text>
-        <Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Bersama, kita terus wujudkan Desa Darmasaba yang sadar hukum dan berprestasi!
-        </Text>
-      <Divider color={colors["blue-button"]} />
-      <Flex justify={"space-between"} py={20}>
-        <Text fz={'md'}>25 May 2021 . Darmasaba</Text>
-        <Box>
-          <Flex gap={"lg"}>
-            <ActionIcon variant='transparent'>
-              <IconBrandFacebook color={colors["blue-button"]} size={"30"} />
-            </ActionIcon>
-            <ActionIcon variant='transparent'>
-              <IconBrandInstagram color={colors["blue-button"]} size={"30"} />
-            </ActionIcon>
-            <ActionIcon variant='transparent'>
-              <IconBrandTwitter color={colors["blue-button"]} size={"30"} />
-            </ActionIcon>
-            <ActionIcon variant='transparent'>
-              <IconBrandWhatsapp color={colors["blue-button"]} size={"30"} />
-            </ActionIcon>
-          </Flex>
-        </Box>
-      </Flex>
-      <Divider color={colors["blue-button"]} pb={50} />
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;
diff --git a/src/app/darmasaba/(tambahan)/prestasi-desa/(detail)/prestasi-juara-3-dalam-lomba-keluarga-sadar-hukum-kabupaten-badung-tahun-2024/page.tsx b/src/app/darmasaba/(tambahan)/prestasi-desa/(detail)/prestasi-juara-3-dalam-lomba-keluarga-sadar-hukum-kabupaten-badung-tahun-2024/page.tsx
deleted file mode 100644
index a73c6f99..00000000
--- a/src/app/darmasaba/(tambahan)/prestasi-desa/(detail)/prestasi-juara-3-dalam-lomba-keluarga-sadar-hukum-kabupaten-badung-tahun-2024/page.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
-import colors from '@/con/colors';
-import { Stack, Container, Box, Text, Image, ActionIcon, Divider, Flex } from '@mantine/core';
-import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from '@tabler/icons-react';
-import React from 'react';
-
-
-function Page() {
-  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={{ base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem" }} c={colors["blue-button"]} fw={"bold"}>
-            Juara 3 dalam Lomba Keluarga Sadar Hukum Kabupaten Badung Tahun 2024
-          </Text>
-          <Text
-            ta={"center"}
-            fw={"bold"}
-            fz={"1.5rem"}
-          >
-            Hukum dan Kesadaran Masyarakat
-          </Text>
-        </Box>
-        <Image src="/api/img/prestasilombahukum.png" alt='' w={"100%"} />
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Dengan bangga, KADARKUM Desa Darmasaba berhasil meraih Juara 3 dalam Lomba Keluarga Sadar Hukum Kabupaten Badung Tahun 2024.
-          Prestasi ini tidak lepas dari dukungan penuh dan semangat tinggi dari Ida Bagus Surya Prabhawa Manuaba, S.H., M.H., NL.P. selaku Perbekel Darmasaba yang selalu mendampingi dari proses pelatihan hingga perlombaan, serta turut hadir perwakilan Kecamatan Abiansemal, Ketua BPD Desa Darmasaba, Ketua TP PKK Desa Darmasaba, Perangkat & Staf Desa Darmasaba, Karang Taruna Paramartha Dharma Desa Darmasaba dan seluruh Tim Sukses KADARKUM Desa Darmasaba.
-        </Text>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Acara yang berlangsung pada 14 November 2024 di Kertha Gosana Lt. 3 Pusat Pemerintahan Kabupaten Badung ini menjadi bukti nyata bahwa kerja keras dan kolaborasi adalah kunci keberhasilan.
-        </Text>
-        <Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Bersama, kita terus wujudkan Desa Darmasaba yang sadar hukum dan berprestasi!
-        </Text>
-        <Divider color={colors["blue-button"]} />
-        <Flex justify={"space-between"} py={20}>
-          <Text fz={'md'}>25 May 2021 . Darmasaba</Text>
-          <Box>
-            <Flex gap={"lg"}>
-              <ActionIcon variant='transparent'>
-                <IconBrandFacebook color={colors["blue-button"]} size={"30"} />
-              </ActionIcon>
-              <ActionIcon variant='transparent'>
-                <IconBrandInstagram color={colors["blue-button"]} size={"30"} />
-              </ActionIcon>
-              <ActionIcon variant='transparent'>
-                <IconBrandTwitter color={colors["blue-button"]} size={"30"} />
-              </ActionIcon>
-              <ActionIcon variant='transparent'>
-                <IconBrandWhatsapp color={colors["blue-button"]} size={"30"} />
-              </ActionIcon>
-            </Flex>
-          </Box>
-        </Flex>
-        <Divider color={colors["blue-button"]} pb={50} />
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;
diff --git a/src/app/darmasaba/(tambahan)/prestasi-desa/(detail)/tim-bola-voli-putri-dharma-temaja-meraih-juara-3-dalam-turnamen-bola-voli-mangupura-cup-2024-kategori-putri-se-bali/page.tsx b/src/app/darmasaba/(tambahan)/prestasi-desa/(detail)/tim-bola-voli-putri-dharma-temaja-meraih-juara-3-dalam-turnamen-bola-voli-mangupura-cup-2024-kategori-putri-se-bali/page.tsx
deleted file mode 100644
index b51203f0..00000000
--- a/src/app/darmasaba/(tambahan)/prestasi-desa/(detail)/tim-bola-voli-putri-dharma-temaja-meraih-juara-3-dalam-turnamen-bola-voli-mangupura-cup-2024-kategori-putri-se-bali/page.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
-import colors from '@/con/colors';
-import { Stack, Container, Box, Text, Image, ActionIcon, Divider, Flex } from '@mantine/core';
-import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from '@tabler/icons-react';
-import React from 'react';
-function Page() {
-  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={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} c={colors["blue-button"]} fw={"bold"}>
-            Juara 3 Turnamen Bola Voli Mangupura Cup 2024
-          </Text>
-          <Text
-            ta={"center"}
-            fw={"bold"}
-            fz={"1.5rem"}
-          >
-            Olahraga dan Kepemudaan
-          </Text>
-        </Box>
-        <Image src="/api/img/prestasi-voli.jpeg" alt='' w={"100%"} />
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Selamat kepada Tim Bola Voli Putri Dharma Temaja yang berhasil meraih juara 3 dalam Turnamen Bola Voli Mangupura Cup 2024 kategori Putri Se-Bali.
-          Perjuangan luar biasa yang ditunjukkan oleh tim ini merupakan bukti nyata kerja keras, kekompakan, dan semangat pantang menyerah. Dalam kompetisi yang diikuti oleh tim-tim terbaik dari seluruh Bali, Tim Dharma Temaja berhasil menunjukkan performa yang menginspirasi dan mengharumkan nama desa.
-        </Text>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Terima kasih kepada seluruh pemain, pelatih, serta pendukung yang selalu memberikan dukungan penuh di setiap pertandingan. Kemenangan ini adalah awal dari perjalanan yang lebih besar, dan semoga prestasi ini dapat terus memotivasi kita untuk mencapai hasil yang lebih gemilang di masa depan.
-        </Text>
-        <Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Mari kita terus dukung Tim Bola Voli Putri Dharma Temaja agar semakin bersinar di ajang-ajang berikutnya
-        </Text>
-        <Divider color={colors["blue-button"]} />
-        <Flex justify={"space-between"} py={20}>
-          <Text fz={'md'}>25 May 2021 . Darmasaba</Text>
-          <Box>
-            <Flex gap={"lg"}>
-              <ActionIcon variant='transparent'>
-                <IconBrandFacebook color={colors["blue-button"]} size={"30"} />
-              </ActionIcon>
-              <ActionIcon variant='transparent'>
-                <IconBrandInstagram color={colors["blue-button"]} size={"30"} />
-              </ActionIcon>
-              <ActionIcon variant='transparent'>
-                <IconBrandTwitter color={colors["blue-button"]} size={"30"} />
-              </ActionIcon>
-              <ActionIcon variant='transparent'>
-                <IconBrandWhatsapp color={colors["blue-button"]} size={"30"} />
-              </ActionIcon>
-            </Flex>
-          </Box>
-        </Flex>
-        <Divider color={colors["blue-button"]} pb={50} />
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;
diff --git a/src/app/darmasaba/(tambahan)/prestasi-desa/[id]/page.tsx b/src/app/darmasaba/(tambahan)/prestasi-desa/[id]/page.tsx
new file mode 100644
index 00000000..b8e6f43c
--- /dev/null
+++ b/src/app/darmasaba/(tambahan)/prestasi-desa/[id]/page.tsx
@@ -0,0 +1,147 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import prestasiState from '@/app/admin/(dashboard)/_state/landing-page/prestasi-desa';
+import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
+import colors from '@/con/colors';
+import { ActionIcon, Box, Container, Divider, Flex, Image, Skeleton, Stack, Text } from '@mantine/core';
+import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from '@tabler/icons-react';
+import { useParams, usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+
+function Page() {
+  const params = useParams();
+  const pathname = usePathname();
+  const [baseUrl, setBaseUrl] = useState('');
+  const state = useProxy(prestasiState.prestasiDesa);
+  
+  // Get base URL for sharing
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      setBaseUrl(window.location.origin);
+    }
+  }, []);
+  useEffect(() => {
+    prestasiState.kategoriPrestasi.findMany.load()
+    const loadData = async () => {
+      try {
+        await state.findMany.load();
+      } catch (error) {
+        console.error('Error loading data:', error);
+      }
+    }
+    loadData();
+  }, [])
+
+  useEffect(() => {
+    state.findUnique.load(params?.id as string);
+  }, [params?.id]);
+
+  if (!state.findUnique.data) {
+    return (
+      <Stack py={10} px={{ base: "md", md: 100 }}>
+        <Skeleton h={40} />
+        <Skeleton h={300} mt="md" />
+      </Stack>
+    );
+  }
+
+  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%" }}>
+        {state.findUnique.data && (
+          <>
+            <Box pb={20} key={state.findUnique.data.id}>
+              <Text 
+                ta={"center"} 
+                fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} 
+                c={colors["blue-button"]} 
+                fw={"bold"}
+              >
+                {state.findUnique.data.name}
+              </Text>
+              <Text ta={"center"} fw={"bold"} fz={"1.5rem"}>
+                {state.findUnique.data.kategori?.name}
+              </Text>
+            </Box>
+            {state.findUnique.data.image?.link && (
+              <Image 
+                src={state.findUnique.data.image.link} 
+                alt={state.findUnique.data.name || 'Prestasi'} 
+                w={"100%"} 
+                style={{ maxHeight: '500px', objectFit: 'cover' }}
+              />
+            )}
+            <Box mt="md">
+              <Text dangerouslySetInnerHTML={{ __html: state.findUnique.data.deskripsi || '' }} />
+              <Text mt="md" c="dimmed" size="sm">
+                Dibuat pada: {new Date(state.findUnique.data.createdAt).toLocaleDateString('id-ID')}
+              </Text>
+            </Box>
+          </>
+        )}
+      </Container>
+      <Box px={{ base: "md", md: 100 }}>
+        <Divider color={colors["blue-button"]} />
+        <Flex justify={"space-between"} py={20}>
+          <Text fz="md">
+            Dibuat pada: {state.findUnique.data?.createdAt ? new Date(state.findUnique.data.createdAt).toLocaleDateString('id-ID', {
+              day: 'numeric',
+              month: 'long',
+              year: 'numeric'
+            }) : '-'}
+          </Text>
+          <Box>
+            <Flex gap={"lg"}>
+              <ActionIcon 
+                variant="transparent" 
+                component="a"
+                href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(`${baseUrl}${pathname}`)}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Share on Facebook"
+              >
+                <IconBrandFacebook color={colors["blue-button"]} size={30} />
+              </ActionIcon>
+              <ActionIcon 
+                variant="transparent"
+                component="a"
+                href={`https://www.instagram.com/?url=${encodeURIComponent(`${baseUrl}${pathname}`)}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Share on Instagram"
+              >
+                <IconBrandInstagram color={colors["blue-button"]} size={30} />
+              </ActionIcon>
+              <ActionIcon 
+                variant="transparent"
+                component="a"
+                href={`https://twitter.com/intent/tweet?url=${encodeURIComponent(`${baseUrl}${pathname}`)}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Share on Twitter"
+              >
+                <IconBrandTwitter color={colors["blue-button"]} size={30} />
+              </ActionIcon>
+              <ActionIcon 
+                variant="transparent"
+                component="a"
+                href={`https://wa.me/?text=${encodeURIComponent(`${baseUrl}${pathname}`)}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Share on WhatsApp"
+              >
+                <IconBrandWhatsapp color={colors["blue-button"]} size={30} />
+              </ActionIcon>
+            </Flex>
+          </Box>
+        </Flex>
+        <Divider color={colors["blue-button"]} pb={50} />
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;
diff --git a/src/app/darmasaba/(tambahan)/prestasi-desa/page.tsx b/src/app/darmasaba/(tambahan)/prestasi-desa/page.tsx
index c2e460cb..e519d722 100644
--- a/src/app/darmasaba/(tambahan)/prestasi-desa/page.tsx
+++ b/src/app/darmasaba/(tambahan)/prestasi-desa/page.tsx
@@ -1,34 +1,36 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { BackgroundImage, Box, Button, Container, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { BackgroundImage, Box, Button, Center, Container, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
 import BackButton from '../../(pages)/desa/layanan/_com/BackButto';
 import { useRouter } from 'next/navigation';
+import prestasiState from '@/app/admin/(dashboard)/_state/landing-page/prestasi-desa';
+import { useProxy } from 'valtio/utils';
+import { useEffect, useState } from 'react';
 
-const data = [
-  {
-    id: 1,
-    title: "Olahraga dan Kepemudaan",
-    description: "Tim Bola Voli Putri Dharma Temaja meraih juara 3 dalam Turnamen Bola Voli Mangupura Cup 2024 kategori Putri Se-Bali ",
-    image: "/api/img/prestasi-voli.jpeg",
-    link: "/darmasaba/prestasi-desa/tim-bola-voli-putri-dharma-temaja-meraih-juara-3-dalam-turnamen-bola-voli-mangupura-cup-2024-kategori-putri-se-bali"
-  },
-  {
-    id: 2,
-    title: "Hukum dan Kesadaran Masyarakat",
-    description: "Prestasi Juara 3 dalam Lomba Keluarga Sadar Hukum Kabupaten Badung Tahun 2024",
-    image: "/api/img/prestasilombahukum.png",
-    link: "/darmasaba/prestasi-desa/prestasi-juara-3-dalam-lomba-keluarga-sadar-hukum-kabupaten-badung-tahun-2024"
-  },
-  {
-    id: 3,
-    title: "Tata Kelola dan Inovasi Desa",
-    description: "Peringkat 5 Dalam Ajang Bergengsi Mangupura Award",
-    image: "/api/img/prestasi-peringkat-5.jpeg",
-    link: "/darmasaba/prestasi-desa/peringkat-5-dalam-ajang-bergengsi-mangupura-award"
-  }
-]
 function Page() {
+  const state = useProxy(prestasiState.prestasiDesa);
+  const [loading, setLoading] = useState(true);
+  const [prestasiData, setPrestasiData] = useState<any[]>([]);
   const router = useRouter();
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        setLoading(true);
+        await prestasiState.kategoriPrestasi.findMany.load();
+        await state.findMany.load();
+        setPrestasiData(state.findMany.data || []);
+      } catch (error) {
+        console.error('Error loading data:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    
+    loadData();
+  }, []);
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} >
       <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
@@ -48,12 +50,17 @@ function Page() {
           md: 3,
         }}
       >
-        {data.map((v, k) => {
-          return (
-            <BackgroundImage
-              key={k}
-              src={v.image}
-              h={350}
+        {loading ? (
+          <Center>
+            <Text fz={"2.4rem"}>Memuat Data...</Text>
+          </Center>
+        ) : (
+          prestasiData.map((v, k) => {
+            return (
+              <BackgroundImage
+                key={k}
+                src={v.image?.link}
+                
               radius={16}
               pos={"relative"}
             >
@@ -70,7 +77,7 @@ function Page() {
               <Stack justify='space-between' h={"100%"} gap={0} p={"lg"} pos={"relative"}>
                 <Group>
                   <Paper radius={"lg"} py={7} px={10}>
-                    <Text>{v.title}</Text>
+                    <Text>{v.kategori?.name}</Text>
                   </Paper>
                 </Group>
                 <Box p={"lg"}>
@@ -80,18 +87,27 @@ function Page() {
                     size={"1.8rem"}
                     style={{
                       textAlign: "center",
-                    }}>{v.description}</Text>
+                      lineHeight: 1.4,
+                      minHeight: '5.4rem',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center'
+                    }}
+                    lineClamp={3}
+                    dangerouslySetInnerHTML={{ __html: v.deskripsi }}
+                  />
                 </Box>
                 <Group justify="center">
                   <Button px={20} radius={"100"} size="md" bg={colors["blue-button"]}
-                    onClick={() => router.push(v.link)}>
+                    onClick={() => router.push(`/darmasaba/prestasi-desa/${v.id}`)}>
                     Detail
                   </Button>
                 </Group>
               </Stack>
             </BackgroundImage>
           )
-        })}
+        })
+      )}
       </SimpleGrid>
     </Stack>
   );
diff --git a/src/app/darmasaba/_com/main-page/prestasi/index.tsx b/src/app/darmasaba/_com/main-page/prestasi/index.tsx
index 8ac7b9ef..1b7fed31 100644
--- a/src/app/darmasaba/_com/main-page/prestasi/index.tsx
+++ b/src/app/darmasaba/_com/main-page/prestasi/index.tsx
@@ -1,31 +1,34 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import prestasiState from "@/app/admin/(dashboard)/_state/landing-page/prestasi-desa";
 import colors from "@/con/colors";
 import { BackgroundImage, Box, Button, Center, Container, Group, SimpleGrid, Stack, Text } from "@mantine/core";
+import { useProxy } from "valtio/utils";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import Link from "next/link";
 
-const data = [
-    {
-        id: 1,
-        title: "Olahraga dan Kepemudaan",
-        deskripsi: "Tim Bola Voli Putri Dharma Temaja meraih juara 3 dalam Turnamen Bola Voli Mangupura Cup 2024 kategori Putri Se-Bali ",
-        image: "/api/img/prestasi-voli.jpeg",
-        link: "/darmasaba/prestasi-desa/tim-bola-voli-putri-dharma-temaja-meraih-juara-3-dalam-turnamen-bola-voli-mangupura-cup-2024-kategori-putri-se-bali"
-      },
-      {
-        id: 2,
-        title: "Hukum dan Kesadaran Masyarakat",
-        deskripsi: "Prestasi Juara 3 dalam Lomba Keluarga Sadar Hukum Kabupaten Badung Tahun 2024",
-        image: "/api/img/prestasilombahukum.png",
-        link: "/darmasaba/prestasi-desa/prestasi-juara-3-dalam-lomba-keluarga-sadar-hukum-kabupaten-badung-tahun-2024"
-      },
-      {
-        id: 3,
-        title: "Tata Kelola dan Inovasi Desa",
-        deskripsi: "Peringkat 5 Dalam Ajang Bergengsi Mangupura Award",
-        image: "/api/img/prestasi-peringkat-5.jpeg",
-        link: "/darmasaba/prestasi-desa/peringkat-5-dalam-ajang-bergengsi-mangupura-award"
-      }
-]
 function Prestasi() {
+    const state = useProxy(prestasiState.prestasiDesa);
+    const [loading, setLoading] = useState(false);
+    const router = useRouter()
+
+    useEffect(() => {
+        prestasiState.kategoriPrestasi.findMany.load()
+        const loadData = async () => {
+            try {
+                setLoading(true);
+                await state.findMany.load();
+            } catch (error) {
+                console.error('Error loading data:', error);
+            } finally {
+                setLoading(false);
+            }
+        }
+        loadData();
+    }, [])
+
+    const data = (state.findMany.data || []).slice(0, 3);
     return (
         <>
             <Stack p={"sm"}>
@@ -43,52 +46,56 @@ function Prestasi() {
                             sm: 3
                         }}
                     >
-                        {data.map((v, k) => {
-                            return (
-                                <BackgroundImage
-                                    key={k}
-                                    src={v.image}
-                                    h={720}
-                                    radius={16}
-                                    pos={"relative"}
-                                >
-                                    <Box
-                                        style={{
-                                            borderRadius: 16,
-                                            zIndex: 0
-                                        }}
-                                        pos={"absolute"}
-                                        w={"100%"}
-                                        h={"100%"}
-                                        bg={colors.trans.dark[2]}
-                                    />
-                                    <Stack justify="space-between" h={"100%"} gap={0} p={"lg"} pos={"relative"}>
-                                        <Box p={"lg"}>
+                        {loading ? (
+                            <Center>
+                                <Text fz={"2.4rem"}>Memuat Data...</Text>
+                            </Center>
+                        ) : (
+                            data.map((v, k) => {
+                                return (
+                                    <BackgroundImage
+                                        key={k}
+                                        src={v.image?.link || ''}
+                                        radius={16}
+                                        pos={"relative"}
+                                    >
+                                        <Box
+                                            style={{
+                                                borderRadius: 16,
+                                                zIndex: 0
+                                            }}
+                                            pos={"absolute"}
+                                            w={"100%"}
+                                            h={"100%"}
+                                            bg={colors.trans.dark[2]}
+                                        />
+                                        <Stack justify="space-between" h={"100%"} gap={0} p={"lg"} pos={"relative"}>
+                                            <Box p={"lg"}>
+                                                <Text
+                                                    c={"white"}
+                                                    fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }}
+                                                    ta={"center"}
+                                                >
+                                                    {v.kategori.name}
+                                                </Text>
+                                            </Box>
                                             <Text
+                                                fw={"bold"}
                                                 c={"white"}
-                                                fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem"}}
+                                                fz={{ base: "2rem", md: "2.5rem", lg: "2.7rem", xl: "3rem" }}
                                                 ta={"center"}
-                                            >
-                                                {v.title}
-                                            </Text>
-                                        </Box>
-                                        <Text
-                                            fw={"bold"}
-                                            c={"white"}
-                                            fz={{base: "2rem", md: "2.5rem", lg: "2.7rem", xl: "3rem"}}
-                                            ta={"center"}
-                                        >
-                                            {v.deskripsi}
-                                        </Text>
-                                        <Group justify="center">
-                                            <Button component={Link} href={v.link} px={46} radius={"100"} size="md" bg={colors["blue-button"]}>
-                                                Lihat Detail
-                                            </Button>
-                                        </Group>
-                                    </Stack>
-                                </BackgroundImage>
-                            )
-                        })}
+                                                dangerouslySetInnerHTML={{ __html: v.deskripsi }}
+                                            />
+                                            <Group justify="center">
+                                                <Button onClick={() => router.push(`/darmasaba/prestasi-desa/${v.id}`)} px={46} radius={"100"} size="md" bg={colors["blue-button"]}>
+                                                    Lihat Detail
+                                                </Button>
+                                            </Group>
+                                        </Stack>
+                                    </BackgroundImage>
+                                )
+                            })
+                        )}
                     </SimpleGrid>
                 </Box>
             </Stack>