Sinkronisasi UI & API Admin - User Submenu Penghargaan

src/app/admin/(dashboard)/_state/desa/penghargaan.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";
@@ -5,10 +6,10 @@ import { proxy } from "valtio";
 import { z } from "zod";
 
 const templateForm = z.object({
-  name: z.string().min(1).max(50),
-  juara: z.string().min(1).max(50),
+  name: z.string().min(1).max(5000),
+  juara: z.string().min(1).max(5000),
   deskripsi: z.string().min(1).max(5000),
-  imageId: z.string().min(1).max(50),
+  imageId: z.string().min(1).max(5000),
 });
 
 const defaultForm = {
@@ -50,17 +51,38 @@ const penghargaanState = proxy({
     },
   },
   findMany: {
-    data: null as
-      | Prisma.PenghargaanGetPayload<{
-          include: {
-            image: true;
-          };
-        }>[]
-      | null,
-    async load() {
-      const res = await ApiFetch.api.desa.penghargaan["find-many"].get();
-      if (res.status === 200) {
-        penghargaanState.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
+      penghargaanState.findMany.loading = true;  // Use the full path to access the property
+      penghargaanState.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.desa.penghargaan[
+          "find-many"
+        ].get({
+          query: { page, limit },
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          penghargaanState.findMany.data = res.data.data || [];
+          penghargaanState.findMany.total = res.data.total || 0;
+          penghargaanState.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load penghargaan:", res.data?.message);
+          penghargaanState.findMany.data = [];
+          penghargaanState.findMany.total = 0;
+          penghargaanState.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading penghargaan:", error);
+        penghargaanState.findMany.data = [];
+        penghargaanState.findMany.total = 0;
+        penghargaanState.findMany.totalPages = 1;
+      } finally {
+        penghargaanState.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/page.tsx

@@ -51,7 +51,6 @@ function ListSuratKeterangan({ search }: { search: string }) {
           item.deskripsi?.toLowerCase().includes(keyword)
         );
       })
-      .sort((a, b) => a.posisi?.hierarki - b.posisi?.hierarki); 
     }, [data, search]); 
   
     // Handle loading state

src/app/admin/(dashboard)/desa/penghargaan/[id]/page.tsx

@@ -50,6 +50,10 @@ function DetailPenghargaan() {
           {statePenghargaan.findUnique.data ? (
             <Paper key={statePenghargaan.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
               <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 400, md: 400, lg: 400 }} src={statePenghargaan.findUnique.data?.image?.link} alt="gambar" />
+                </Box>
                 <Box>
                   <Text fw={"bold"} fz={"lg"}>Judul</Text>
                   <Text fz={"lg"}>{statePenghargaan.findUnique.data?.name}</Text>
@@ -62,10 +66,6 @@ function DetailPenghargaan() {
                   <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
                   <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: statePenghargaan.findUnique.data?.deskripsi }} />
                 </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
-                  <Image w={{ base: 150, md: 150, lg: 150 }} src={statePenghargaan.findUnique.data?.image?.link} alt="gambar" />
-                </Box>
                 <Flex gap={"xs"} mt={10}>
                   <Button
                     onClick={() => {

src/app/admin/(dashboard)/desa/penghargaan/page.tsx

@@ -1,61 +1,103 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import penghargaanState from '@/app/admin/(dashboard)/_state/desa/penghargaan';
 import colors from '@/con/colors';
-import { Box, Button, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { Box, Button, Center, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
 import { useProxy } from 'valtio/utils';
-import JudulListTab from '../../_com/judulListTab';
-import { useState } from 'react';
 import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
 
 function Penghargaan() {
-    const [search, setSearch] = useState("");
-    return (
-      <Box>
-        <HeaderSearch
-          title='Posisi Organisasi'
-          placeholder='pencarian'
-          searchIcon={<IconSearch size={20} />}
-          value={search}
-          onChange={(e) => setSearch(e.currentTarget.value)}
-        />
-        <ListPenghargaan search={search} />
-      </Box>
-    );
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Penghargaan'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListPenghargaan search={search} />
+    </Box>
+  );
 }
 
 function ListPenghargaan({ search }: { search: string }) {
   const state = useProxy(penghargaanState)
   const router = useRouter()
-  useShallowEffect(() => {
-    state.findMany.load()
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany;
+
+  useEffect(() => {
+    load(page, 10)
   }, [])
 
-  const filteredData = (state.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = useMemo(() => {
+    if (!data) return [];
+    return data.filter(item => {
+      const keyword = search.toLowerCase();
+      return (
+        item.name?.toLowerCase().includes(keyword) ||
+        item.deskripsi?.toLowerCase().includes(keyword)
+      );
+    })
+  }, [data, search]);
 
-  if (!state.findMany.data) {
-    return(
+  // Handle loading state
+  if (loading || !data) {
+    return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={300} />
       </Stack>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <Box py={10}>
+        <Paper bg={colors['white-1']} p={'md'}>
+          <JudulList
+            title='List Penghargaan'
+            href='/admin/desa/penghargaan/create'
+          />
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh>Nama</TableTh>
+                <TableTh>Deskripsi</TableTh>
+                <TableTh>Image</TableTh>
+                <TableTh>Detail</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              <TableTr>
+                <TableTd colSpan={4}>
+                  <Text ta="center">Tidak ada data</Text>
+                </TableTd>
+              </TableTr>
+            </TableTbody>
+          </Table>
+        </Paper>
+      </Box>
     )
   }
+
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
-        <JudulListTab
+        <JudulList
           title='List Penghargaan'
           href='/admin/desa/penghargaan/create'
-          placeholder='pencarian'
-          searchIcon={<IconSearch size={16} />}
         />
         <Table striped withTableBorder withRowBorders>
           <TableThead>
@@ -69,25 +111,43 @@ function ListPenghargaan({ search }: { search: string }) {
           <TableTbody>
             {filteredData.map((item) => (
               <TableTr key={item.id}>
-                <TableTd>{item.name}</TableTd>
                 <TableTd>
-                  <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                  <Box w={100}>
+                    <Text lineClamp={1} truncate="end" fz={"sm"}>{item.name}</Text>
+                  </Box>
+                </TableTd>
+                <TableTd>
+                  <Box w={100}>
+                    <Text lineClamp={1} truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                  </Box>
                 </TableTd>
                 <TableTd>
                   <Image w={100} src={item.image?.link} alt="gambar" />
-                </TableTd>  
+                </TableTd>
                 <TableTd>
                   <Text>
                     <Button onClick={() => router.push(`/admin/desa/penghargaan/${item.id}`)}>
-                    <IconDeviceImac size={20} />
-                  </Button>
-                </Text>
-              </TableTd>
-            </TableTr>
-          ))}
+                      <IconDeviceImac size={20} />
+                    </Button>
+                  </Text>
+                </TableTd>
+              </TableTr>
+            ))}
           </TableTbody>
         </Table>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo(0, 0);
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
     </Box>
   );
 }