Sinkronisasi UI Admin & User Menu Landing Page, Submenu Profile, SDGSDesa

src/app/admin/(dashboard)/_state/landing-page/sdgs-desa.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -52,19 +53,38 @@ const sdgsDesa = proxy({
     },
   },
   findMany: {
-    data: null as Array<
-      Prisma.SDGSDesaGetPayload<{
-        include: {
-          image: true;
-        };
-      }>
-    > | null,
-    async load() {
-      const res = await ApiFetch.api.landingpage.sdgsdesa[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        sdgsDesa.findMany.data = res.data?.data ?? [];
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
+      sdgsDesa.findMany.loading = true;  // Use the full path to access the property
+      sdgsDesa.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.landingpage.sdgsdesa[
+          "findMany"
+        ].get({
+          query: { page, limit },
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          sdgsDesa.findMany.data = res.data.data || [];
+          sdgsDesa.findMany.total = res.data.total || 0;
+          sdgsDesa.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load media sosial:", res.data?.message);
+          sdgsDesa.findMany.data = [];
+          sdgsDesa.findMany.total = 0;
+          sdgsDesa.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading media sosial:", error);
+        sdgsDesa.findMany.data = [];
+        sdgsDesa.findMany.total = 0;
+        sdgsDesa.findMany.totalPages = 1;
+      } finally {
+        sdgsDesa.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/page.tsx

@@ -68,7 +68,7 @@ function ListKategoriKegiatan({ search }: { search: string }) {
   if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton height={300} />
+        <Skeleton height={550} />
       </Stack>
     );
   }

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/page.tsx

@@ -59,7 +59,7 @@ function ListDesaAntiKorupsi({ search }: { search: string }) {
   if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton height={300} />
+        <Skeleton height={550} />
       </Stack>
     );
   }

src/app/admin/(dashboard)/landing-page/profile/media-sosial/page.tsx

@@ -57,7 +57,7 @@ function ListMediaSosial({ search }: { search: string }) {
   if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton height={300} />
+        <Skeleton height={550} />
       </Stack>
     );
   }

src/app/admin/(dashboard)/landing-page/profile/program-inovasi/page.tsx

@@ -57,7 +57,7 @@ function ListProgramInovasi({ search }: { search: string }) {
   if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton height={300} />
+        <Skeleton height={550} />
       </Stack>
     );
   }

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

@@ -163,7 +163,7 @@ function EditKolaborasiInovasi() {
                   <iframe
                     src={previewImage}
                     width="100%"
-                    height="500px"
+                    height="250px"
                     style={{ border: "1px solid #ccc", borderRadius: "8px" }}
                   />
                 ) : (

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

@@ -110,7 +110,7 @@ function CreateSDGsDesa() {
                   <iframe
                     src={previewImage}
                     width="100%"
-                    height="500px"
+                    height="250px"
                     style={{ border: "1px solid #ccc", borderRadius: "8px" }}
                   />
                 ) : (

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

@@ -1,10 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
 import sdgsDesa from '../../_state/landing-page/sdgs-desa';
@@ -30,24 +30,61 @@ function SdgsDesa() {
 function ListSdgsDesa({ search }: { search: string }) {
   const listState = useProxy(sdgsDesa)
   const router = useRouter();
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = listState.findMany;
+
   useEffect(() => {
-    listState.findMany.load()
+    load(page, 10)
   }, [])
 
-  const filteredData = (listState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.jumlah.toLowerCase().includes(keyword)
-    )
-  });
+  const filteredData = useMemo(() => {
+    if (!data) return [];
+    return data.filter(item => {
+      const keyword = search.toLowerCase();
+      return (
+        item.name?.toLowerCase().includes(keyword) ||
+        item.jumlah?.toLowerCase().includes(keyword)
+      );
+    })
+  }, [data, search]);
 
-  if (!listState.findMany.data) {
+  // Handle loading state
+  if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={550} />
       </Stack>
-    )
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <Box py={10}>
+        <Paper bg={colors['white-1']} p={'md'}>
+          <JudulList
+            title='List Desa Anti Korupsi'
+            href='/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/create'
+          />
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withTableBorder withRowBorders>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nama SDGs Desa</TableTh>
+                  <TableTh>Jumlah SDGs Desa</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+            </Table>
+          </Box>
+        </Paper>
+      </Box>
+    );
   }
 
   return (
@@ -90,6 +127,18 @@ function ListSdgsDesa({ search }: { search: string }) {
           </Box>
         </Stack>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo(0, 0);
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
     </Box>
   )
 }