Sinkronisasi API & UI Admin & User, Menu Landing Page, Submenu Potensi

src/app/admin/(dashboard)/_state/desa/potensi.ts

@@ -6,7 +6,7 @@ import { proxy } from "valtio";
 import { z } from "zod";
 
 const templateForm = z.object({
-  name: z.string().min(1).max(50),
+  name: z.string().min(1).max(5000),
   deskripsi: z.string().min(1).max(5000),
   kategoriId: z.string().min(1).max(50),
   imageId: z.string().min(1).max(50),

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

@@ -84,7 +84,7 @@ function EditPotensi() {
 
       await potensiState.edit.update();
       toast.success("Potensi berhasil diperbarui!");
-      router.push("/admin/desa/potensi");
+      router.push("/admin/desa/potensi/list-potensi");
     } catch (error) {
       console.error("Error updating potensi:", error);
       toast.error("Terjadi kesalahan saat memperbarui potensi");

src/app/darmasaba/(pages)/desa/potensi/page.tsx

@@ -1,105 +1,36 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { BackgroundImage, Box, Button, Flex, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { BackgroundImage, Box, Button, Center, Flex, Group, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
+import { useTransitionRouter } from 'next-view-transitions';
 import BackButton from '../layanan/_com/BackButto';
-import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import potensiDesaState from '@/app/admin/(dashboard)/_state/desa/potensi';
 
-const datamap = [
-  {
-    id: 1,
-    images: "/api/img/tps.png",
-    name: "TPS3R Pudak Mesari",
-    kategori: "Lingkungan",
-    link: "/darmasaba/desa/potensi/tps3r-pudak-mesari",
-  },
-  {
-    id: 2,
-    images: "/api/img/ack.png",
-    name: "Bumdes Pudak Mesari",
-    kategori: "Ekonomi",
-    link: "/darmasaba/desa/potensi/bumdes-pudak-mesari",
-  },
-  {
-    id: 3,
-    images: "/api/img/taman-beji.jpg",
-    name: "Taman Beji Cengana",
-    kategori: "Wisata",
-    link: "/darmasaba/desa/potensi/taman-beji-cengana",
-  },
-  {
-    id: 4,
-    images: "/api/img/waterpark.png",
-    name: "Gumuh Sari Water Park",
-    kategori: "Wisata",
-    link: "/darmasaba/desa/potensi/gumuh-sari-water-park",
-  },
-  {
-    id: 5,
-    images: "/api/img/pertanian.jpg",
-    name: "Pertanian",
-    kategori: "Ekonomi",
-    link: "/darmasaba/desa/potensi/pertanian"
-  },
-  {
-    id: 6,
-    images: "/api/img/warungumkm.jpg",
-    name: "Kawasan Kuliner",
-    kategori: "Ekonomi",
-    link: "/darmasaba/desa/potensi/kawasan-kuliner"
-  },
-  {
-    id: 7,
-    images: "/api/img/ikm.png",
-    name: "IKM Berbasis Pengolahan Pangan",
-    kategori: "Ekonomi",
-    link: "/darmasaba/desa/potensi/ikm-berbasis-pengolahan-pangan"
-  },
-  {
-    id: 8,
-    images: "/api/img/genteng.jpeg",
-    name: "Genteng",
-    kategori: "Ekonomi",
-    link: "/darmasaba/desa/potensi/genteng"
-  },
-  {
-    id: 9,
-    images: "/api/img/peternakanlele.jpg",
-    name: "Peternakan Ikan Lele",
-    kategori: "Ekonomi",
-    link: "/darmasaba/desa/potensi/peternakan-ikan-lele"
-  },
-  {
-    id: 10,
-    images: "/api/img/jogging.jpg",
-    name: "Jogging Track Tegeh Aban, Karang Gadon dan Munduk Uma Desa",
-    kategori: "Lingkungan",
-    link: "/darmasaba/desa/potensi/jogging-track-tegeh-aban-karang-gadon-dan-munduk-uma-desa"
-  },
-  {
-    id: 11,
-    images: "/api/img/damtanahputih.jpeg",
-    name: "Dam Tanah Putih",
-    kategori: "Wisata",
-    link: "/darmasaba/desa/potensi/dam-tanah-putih"
-  },
-  {
-    id: 12,
-    images: "/api/img/umkm.jpeg",
-    name: "UMKM",
-    kategori: "Ekonomi",
-    link: "/darmasaba/desa/potensi/umkm"
-  },
-  {
-    id: 13,
-    images: "/api/img/potong-daging.png",
-    name: "Pemotongan Daging",
-    kategori: "Ekonomi",
-    link: "/darmasaba/desa/potensi/pemotongan-daging"
-  },
 
-]
 function Page() {
-  const router = useRouter()
+  const router = useTransitionRouter()
+  const [loading, setLoading] = useState(false)
+  const state = useProxy(potensiDesaState)
+
+  useEffect(()=> {
+    state.kategoriPotensi.findMany.load()
+    const loadData = async () => {
+      try {
+        setLoading(true)
+        await state.potensiDesa.findMany.load()
+      } catch (error) {
+        console.error('Error loading data:', error);
+      } finally {
+        setLoading(false)
+      }
+    }
+    loadData()
+  }, [])
+
+  const data = state.potensiDesa.findMany.data
+  // const kategoriData = state.kategoriPotensi.findMany.data
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} >
       <Box px={{ base: "md", md: 100 }}>
@@ -118,13 +49,17 @@ function Page() {
                 </Text>
               </Box>
               <Paper radius={"md"} px={"xl"} py={5} bg={colors["blue-button"]} >
-                <Flex justify={"space-evenly"} align={"center"} gap={"xl"}>
+                <Flex justify={"space-between"} align={"center"} gap={"xl"}>
                   <Box>
-                    <Text ta={"center"} fz={"h2"} fw={"bold"} c={"white"}>13</Text>
+                    <Text ta={"center"} fz={"h2"} fw={"bold"} c={"white"}>
+                      {data?.filter(item => item.kategori?.nama.toLowerCase() !== 'wisata' ).length || 0}
+                    </Text>
                     <Text ta={"center"} fz={"sm"} c={"white"}>Potensi</Text>
                   </Box>
                   <Box>
-                    <Text ta={"center"} fz={"h2"} fw={"bold"} c={"white"}>5</Text>
+                    <Text ta={"center"} fz={"h2"} fw={"bold"} c={"white"}>
+                      {data?.filter(item => item.kategori?.nama.toLowerCase() === 'wisata' ).length || 0}
+                    </Text>
                     <Text ta={"center"} fz={"sm"} c={"white"}>Destinasi Wisata</Text>
                   </Box>
                 </Flex>
@@ -140,11 +75,16 @@ function Page() {
             sm: 3
           }}
         >
-          {datamap.map((v, k) => {
+          {loading ? (
+            <Center>
+              <Skeleton h={250} />
+            </Center>
+          ) : (
+            data?.map((v, k) => {
             return (
               <BackgroundImage
                 key={k}
-                src={v.images}
+                src={v.image?.link || ''}
                 h={350}
                 radius={16}
                 pos={"relative"}
@@ -162,7 +102,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.kategori}</Text>
+                      <Text>{v.kategori?.nama}</Text>
                     </Paper>
                   </Group>
                   <Box p={"lg"}>
@@ -176,14 +116,15 @@ function Page() {
                   </Box>
                   <Group justify="center">
                     <Button px={20} radius={"100"} size="md" bg={colors["blue-button"]}
-                      onClick={() => router.push(v.link)}>
+                      onClick={() => router.push(`/darmasaba/desa/potensi/${v.id}`)}>
                       Detail
                     </Button>
                   </Group>
                 </Stack>
               </BackgroundImage>
             )
-          })}
+          })
+        )}
         </SimpleGrid>
       </Box>