Menu Landing Page User

Submenu APBDes

prisma/schema.prisma

@@ -184,10 +184,10 @@ model APBDes {
   id        String      @id @default(cuid())
   name      String      @unique
   jumlah    String
-  image     FileStorage @relation("APBDesImage", fields: [imageId], references: [id])
+  image     FileStorage? @relation("APBDesImage", fields: [imageId], references: [id])
-  imageId   String
+  imageId   String?
-  file      FileStorage @relation("APBDesFile", fields: [fileId], references: [id])
+  file      FileStorage? @relation("APBDesFile", fields: [fileId], references: [id])
-  fileId    String
+  fileId    String?
   createdAt DateTime    @default(now())
   updatedAt DateTime    @updatedAt
   deletedAt DateTime    @default(now())

src/app/admin/(dashboard)/landing-page/apbdes/create/page.tsx

@@ -195,7 +195,6 @@ function CreateAPBDes() {
             placeholder='Masukkan judul'
           />
            <TextInput
-           type='number'
             value={stateAPBDes.create.form.jumlah}
             onChange={(val) => {
               stateAPBDes.create.form.jumlah = val.target.value;

src/app/admin/(dashboard)/landing-page/apbdes/page.tsx

@@ -77,7 +77,7 @@ function ListAPBDes({ search }: { search: string }) {
                       </Box>
                     </TableTd>
                     <TableTd>
-                      <Text truncate="end" fz={"sm"}>{item.jumlah}</Text>
+                      <Text truncate="end" fz={"sm"}>Rp. {item.jumlah}</Text>
                     </TableTd>
                     <TableTd>
                       {item.file?.link ? (

src/app/api/[[...slugs]]/_lib/landing_page/apbdes/findMany.ts

@@ -17,7 +17,7 @@ async function apbdesFindMany(context: Context) {
         },
         skip,
         take: limit,
-        orderBy: { createdAt: "desc" }, // opsional, kalau mau urut berdasarkan waktu
+        orderBy: { name: "asc" }, // opsional, kalau mau urut berdasarkan waktu
       }),
       prisma.aPBDes.count({
         where: { isActive: true },

src/app/darmasaba/(tambahan)/apbdes/page.tsx

@@ -1,47 +1,33 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
 import colors from '@/con/colors';
-import { ActionIcon, BackgroundImage, Box, Container, Flex, Group, SimpleGrid, Stack, Text } from '@mantine/core';
+import { ActionIcon, BackgroundImage, Box, Center, Container, Flex, Group, SimpleGrid, Stack, Text } from '@mantine/core';
 import { IconDownload } from '@tabler/icons-react';
 import BackButton from '../../(pages)/desa/layanan/_com/BackButto';
+import apbdes from '@/app/admin/(dashboard)/_state/landing-page/apbdes';
+import { useProxy } from 'valtio/utils';
+import { useEffect, useState } from 'react';
+import { Link } from 'next-view-transitions';
 
-const data = [
-  {
-    id: 1,
-    title: "Pendapatan",
-    image: "/api/img/pendapatan.jpeg",
-    value: "Rp 495M"
-  },
-  {
-    id: 2,
-    title: "Belanja",
-    image: "/api/img/belanja.jpeg",
-    value: "Rp 395M"
-  },
-  {
-    id: 3,
-    title: "Pembiayaan",
-    image: "/api/img/pembiayaan.jpeg",
-    value: "Rp 295M"
-  },
-  {
-    id: 4,
-    title: "APBDesa 2025",
-    image: "/api/img/apb-des.jpg",
-    value: "Rp 500M"
-  },
-  {
-    id: 5,
-    title: "APBDesa 2024",
-    image: "/api/img/apb-des.jpg",
-    value: "Rp 450M"
-  },
-  {
-    id: 6,
-    title: "APBDesa 2023",
-    image: "/api/img/apb-des.jpg",
-    value: "Rp 400M"
-  },
-]
 function Page() {
+  const state = useProxy(apbdes);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    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 || [];
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={22}>
       <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
@@ -65,11 +51,16 @@ function Page() {
           sm: 3,
         }}
       >
-        {data.map((v, k) => {
+        {loading ? (
+          <Center>
+            <Text fz={"2.4rem"}>Memuat Data...</Text>
+          </Center>
+        ) : (
+          data.map((v, k) => {
             return (
               <BackgroundImage
                 key={k}
-              src={v.image}
+                src={v.image?.link || ''}
                 h={350}
                 radius={16}
                 pos={"relative"}
@@ -91,7 +82,7 @@ function Page() {
                       size={"1.5rem"}
                       style={{
                         textAlign: "center",
-                    }}>{v.title}</Text>
+                      }}>{v.name}</Text>
                   </Box>
                   <Text
                     fw={"bold"}
@@ -99,9 +90,9 @@ function Page() {
                     size={"3.5rem"}
                     style={{
                       textAlign: "center",
-                  }}>{v.value}</Text>
+                    }}>{v.jumlah}</Text>
                   <Group justify="center">
-                  <ActionIcon px={70} py={20} radius={"xl"} size="md" bg={colors["blue-button"]}>
+                    <ActionIcon px={70} py={20} radius={"xl"} size="md" bg={colors["blue-button"]} component={Link} href={v.file?.link || ''}>
                       <Flex gap={"md"}>
                         <IconDownload size={20} />
                         <Text fz={"sm"} c={"white"}>Download</Text>
@@ -111,7 +102,8 @@ function Page() {
                 </Stack>
               </BackgroundImage>
             )
-        })}
+          })
+        )}
       </SimpleGrid>
     </Stack>
   );

src/app/darmasaba/_com/main-page/apbdes/index.tsx

@@ -1,34 +1,37 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import apbdes from '@/app/admin/(dashboard)/_state/landing-page/apbdes';
 import colors from '@/con/colors';
-import { ActionIcon, BackgroundImage, Box, Button, Flex, Group, SimpleGrid, Stack, Text } from '@mantine/core';
+import { ActionIcon, BackgroundImage, Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text } from '@mantine/core';
 import { IconDownload } from '@tabler/icons-react';
 import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
 
-const data = [
-  {
-    id: 1,
-    title: "Pendapatan",
-    image: "/api/img/pendapatan.jpeg",
-    value: "Rp 495M"
-  },
-  {
-    id: 2,
-    title: "Belanja",
-    image: "/api/img/belanja.jpeg",
-    value: "Rp 395M"
-  },
-  {
-    id: 3,
-    title: "Pembiayaan",
-    image: "/api/img/pembiayaan.jpeg",
-    value: "Rp 295M"
-  },
 
-]
 function Apbdes() {
+  const state = useProxy(apbdes);
+  const [loading, setLoading] = useState(false);
   const textHeading = {
     title: "APBDes",
     des: "Transparansi APBDes Darmasaba adalah langkah nyata menuju tata kelola pemerintahan desa yang bersih dan bertanggung jawab"
   }
+
+  useEffect(() => {
+    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"} gap={"4rem"} bg={colors.Bg}>
@@ -53,11 +56,16 @@ function Apbdes() {
             sm: 3,
           }}
         >
-          {data.map((v, k) => {
+          {loading ? (
+            <Center>
+              <Text fz={"2.4rem"}>Memuat Data...</Text>
+            </Center>
+          ) : (
+            data.map((v, k) => {
               return (
                 <BackgroundImage
                   key={k}
-                src={v.image}
+                  src={v.image?.link || ''}
                   h={350}
                   radius={16}
                   pos={"relative"}
@@ -79,7 +87,7 @@ function Apbdes() {
                         size={"1.5rem"}
                         style={{
                           textAlign: "center",
-                      }}>{v.title}</Text>
+                        }}>{v.name}</Text>
                     </Box>
                     <Text
                       fw={"bold"}
@@ -87,9 +95,9 @@ function Apbdes() {
                       size={"3.5rem"}
                       style={{
                         textAlign: "center",
-                    }}>{v.value}</Text>
+                      }}>{v.jumlah}</Text>
                     <Group justify="center">
-                  <ActionIcon px={70} py={20} radius={"xl"} size="md" bg={colors["blue-button"]}>
+                      <ActionIcon px={70} py={20} radius={"xl"} size="md" bg={colors["blue-button"]} component={Link} href={v.file?.link || ''}>
                         <Flex gap={"md"}>
                           <IconDownload size={20} />
                           <Text fz={"sm"} c={"white"}>Download</Text>
@@ -99,7 +107,8 @@ function Apbdes() {
                   </Stack>
                 </BackgroundImage>
               )
-          })}
+            })
+          )}
         </SimpleGrid>
         <Group pb={80} justify='center'>
           <Button component={Link} href="/darmasaba/apbdes" radius={"lg"} bg={colors["blue-button"]} fz={"h4"}>Lihat Semua</Button>