wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
nico
2025-08-05 22:08:25 +08:00
parent ab887c30e6
commit b62c4be30a
3 changed files with 47 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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),

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

@@ -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");

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

@@ -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>