fix: admin donasi

deskripsi:
- fix perubahan use server menjadi API
src/app/api/admin/donasi/[id]/count/route.ts
src/app/api/admin/donasi/[id]/pencairan/route.ts
src/app/dev/admin/donasi/detail/publish/[id]/page.tsx
src/app_modules/admin/_admin_global/comp_preview_image_admin.tsx
src/app_modules/admin/donasi/detail/publish/detail_list_donatur.tsx
src/app_modules/admin/donasi/detail/publish/detail_list_pencairan.tsx
src/app_modules/admin/donasi/detail/publish/detail_publish.tsx
src/app_modules/admin/donasi/lib/api_fetch_admin_donasi.ts
src/app_modules/admin/donasi/sub-detail/bukti_transfer_pencairan.tsx

No Issue

src/app/api/admin/donasi/[id]/count/route.ts

@@ -0,0 +1,29 @@
+import { NextResponse } from "next/server";
+import prisma from "@/lib/prisma";
+export async function GET(
+  req: Request,
+  { params }: { params: { id: string } }
+) {
+  const { id } = params;
+  try {
+    const data = await prisma.donasi_Invoice.count({
+      where: {
+        donasiId: id,
+        donasiMaster_StatusInvoiceId: "1",
+      },
+    });
+
+    return NextResponse.json({
+      success: true,
+      message: "Data berhasil diambil",
+      data: data,
+    });
+  } catch (error) {
+    console.error("Error get count donasi ", error);
+    return NextResponse.json({
+      success: false,
+      message: "Error get count donasi",
+      reason: (error as Error).message,
+    });
+  }
+}

src/app/api/admin/donasi/[id]/pencairan/route.ts

@@ -1,24 +1,64 @@
 import prisma from "@/lib/prisma";
 import backendLogger from "@/util/backendLogger";
+import _ from "lodash";
 import { NextResponse } from "next/server";
-export async function GET(req: Request, { params }: { params: { id: string } }) {
+export async function GET(
-    const donasiId = params.id
+  req: Request,
+  { params }: { params: { id: string } }
+) {
+  
+  let fixData;
+  const donasiId = params.id;
+  const { searchParams } = new URL(req.url);
+  const page = searchParams.get("page");
+  const takeData = 10
+  const skipData = Number(page) * takeData - takeData;
+
   try {
-        const data = await prisma.donasi_PencairanDana.findMany({
+    if (!page) {
+      fixData = await prisma.donasi_PencairanDana.findMany({
         orderBy: {
           createdAt: "desc",
         },
         where: {
           donasiId: donasiId,
-            }
+        },
-        })
+      });
+    } else {
+      const data = await prisma.donasi_PencairanDana.findMany({
+        take: takeData,
+        skip: skipData,
+        orderBy: {
+          createdAt: "desc",
+        },
+        where: {
+          donasiId: donasiId,
+        },
+      });
 
+      const nCount = await prisma.donasi_PencairanDana.count({
+        where: {
+          donasiId: donasiId,
+        },
+      });
+
+      fixData = {
+        data: data,
+        nPage: _.ceil(nCount / takeData),
+      };
+    }
+
+    return NextResponse.json({
+      success: true,
+      message: "Data berhasil diambil",
+      data: fixData,
+    });
   } catch (error) {
     backendLogger.error("Error get pencairan donasi >>", error);
     return NextResponse.json({
       success: false,
       message: "Error get pencairan donasi",
-            reason: (error as Error).message
+      reason: (error as Error).message,
-        })
+    });
   }
 }

src/app/dev/admin/donasi/detail/publish/[id]/page.tsx

@@ -2,18 +2,10 @@ import { AdminDonasi_DetailPublish } from "@/app_modules/admin/donasi";
 import { AdminDonasi_funCountDonatur } from "@/app_modules/admin/donasi/fun/count/fun_count_donatur";
 import { AdminDonasi_getListPencairanDana } from "@/app_modules/admin/donasi/fun/get/get_list_pencairan_dana_by_id";
 
-export default async function Page({ params }: { params: { id: string } }) {
+export default async function Page() {
-  let donasiId = params.id;
-  // const dataPublish = await AdminDonasi_getOneById(params.id);
-  const countDonatur = await AdminDonasi_funCountDonatur(params.id);
-  const listPencairan = await AdminDonasi_getListPencairanDana(params.id);
-
   return (
     <>
-      <AdminDonasi_DetailPublish
+      <AdminDonasi_DetailPublish />
-        countDonatur={countDonatur}
-        listPencairan={listPencairan as any}
-      />
     </>
   );
 }

src/app_modules/admin/_admin_global/comp_preview_image_admin.tsx

@@ -5,15 +5,18 @@ import Admin_ComponentBackButton from "./back_button";
 import { APIs, pathAssetImage } from "@/lib";
 import { useShallowEffect } from "@mantine/hooks";
 import { useState } from "react";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
 export function Admin_ComponentPreviewImageAdmin({
   fileId,
+  size,
 }: {
   fileId: string;
+  size?: string;
 }) {
   const [isImage, setIsImage] = useState<boolean | null>(null);
 
-  const url = APIs.GET({ fileId: fileId, size: "500" });
+  const url = APIs.GET({ fileId: fileId, size: size || "1000" });
 
   useShallowEffect(() => {
     onLoadImage();
@@ -35,18 +38,20 @@ export function Admin_ComponentPreviewImageAdmin({
     <>
       <Stack>
         <Admin_ComponentBackButton />
-        <Box style={{ zIndex: 0 }} h={"90vh"} pos={"static"} px={"lg"}>
+        <Box style={{ zIndex: 0 }} h={"80vh"} pos={"static"} px={"lg"}>
           {isImage === null ? (
             <Center>
-              <Skeleton height={300} w={200} radius={"sm"} />
+              <CustomSkeleton height={500} w={300} radius={"sm"} />
             </Center>
           ) : isImage ? (
-            <ScrollArea h={"100%"}>
             <Center>
-                <Image alt="Image" src={url} maw={500} miw={200} />
+              <Image alt="Image" src={url} maw={300} />
             </Center>
-            </ScrollArea>
           ) : (
+            // <ScrollArea h={"100%"}>
+            //   <Center>
+            //   </Center>
+            // </ScrollArea>
             <Box
               bg={"gray"}
               style={{

src/app_modules/admin/donasi/detail/publish/detail_list_donatur.tsx

@@ -271,7 +271,6 @@ function TampilanListDonatur({
               verticalSpacing={"xl"}
               horizontalSpacing={"md"}
               p={"md"}
-              w={1120}
             >
               <thead>
                 <tr>

src/app_modules/admin/donasi/detail/publish/detail_list_pencairan.tsx

@@ -1,114 +1,176 @@
-import { AccentColor } from '@/app_modules/_global/color';
+import { AccentColor } from "@/app_modules/_global/color";
-import { AdminColor } from '@/app_modules/_global/color/color_pallet';
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
-import { ComponentAdminGlobal_TitlePage } from '@/app_modules/admin/_admin_global/_component';
+import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
-import TampilanRupiahDonasi from '@/app_modules/donasi/component/tampilan_rupiah';
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
-import { MODEL_DONASI_PENCAIRAN_DANA } from '@/app_modules/donasi/model/interface';
+import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
-import { RouterAdminDonasi } from '@/lib/router_admin/router_admin_donasi';
+import { MODEL_DONASI_PENCAIRAN_DANA } from "@/app_modules/donasi/model/interface";
-import { Center, Box, Spoiler, Button, Stack, Group, ActionIcon, Paper, ScrollArea, Table, Text, TextInput } from '@mantine/core';
+import { RouterAdminDonasi } from "@/lib/router_admin/router_admin_donasi";
-import { useDisclosure } from '@mantine/hooks';
+import {
-import { IconReload } from '@tabler/icons-react';
+  Box,
-import moment from 'moment';
+  Button,
-import { useRouter } from 'next/navigation';
+  Center,
-import React, { useState } from 'react';
+  Paper,
+  ScrollArea,
+  Spoiler,
+  Stack,
+  Table,
+  Text,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import moment from "moment";
+import { useParams, useRouter } from "next/navigation";
+import { useState } from "react";
+import { apiGetAdminDonasiPencairan } from "../../lib/api_fetch_admin_donasi";
+import { Admin_V3_ComponentPaginationBreakpoint } from "@/app_modules/admin/_components_v3/comp_pagination_breakpoint";
 
-function TampilanListPencairan({
+function TampilanListPencairan() {
-  pencairan,
+  const params = useParams<{ id: string }>();
-}: {
-  pencairan: MODEL_DONASI_PENCAIRAN_DANA[];
-}) {
   const router = useRouter();
-  const [data, setData] = useState(pencairan);
+  const [data, setData] = useState<MODEL_DONASI_PENCAIRAN_DANA[] | null>(null);
-  const [opened, { open, close }] = useDisclosure(false);
+  const [nPage, setNPage] = useState<number>(1);
-  const [gambarId, setGambarId] = useState("");
+  const [activePage, setActivePage] = useState<number>(1);
+  const [loading, setLoading] = useState("");
 
-  const rowTable = data.map((e) => (
+  useShallowEffect(() => {
+    onLoadData();
+  }, [activePage]);
+
+  async function onLoadData() {
+    try {
+      const response = await apiGetAdminDonasiPencairan({
+        id: params.id,
+        page: `${activePage}`,
+      });
+
+      if (response?.success && response?.data) {
+        // console.log("response", response.data);
+        setData(response.data.data);
+        setNPage(response.data.nPage);
+      } else {
+        setData([]);
+        setNPage(1);
+      }
+    } catch (error) {
+      console.error("Error get pencairan donasi:", error);
+      setData([]);
+      setNPage(1);
+    }
+  }
+
+  const onPageClick = (page: number) => {
+    setActivePage(page);
+  };
+
+  const rowTable = () => {
+    if (!Array.isArray(data) || data.length === 0) {
+      return (
+        <tr>
+          <td colSpan={12}>
+            <Center>
+              <Text color="gray">Tidak ada data</Text>
+            </Center>
+          </td>
+        </tr>
+      );
+    }
+
+    return data.map((e) => (
       <tr key={e.id}>
         <td>
-        <Center c={AdminColor.white}>
+          <Center c={AdminColor.white} w={150}>
             <TampilanRupiahDonasi nominal={e.nominalCair} />
           </Center>
         </td>
         <td>
-        <Center c={AdminColor.white}>{moment(e.createdAt).format("ll")}</Center>
+          <Center c={AdminColor.white} w={150}>
-      </td>
+            {moment(e.createdAt).format("ll")}
-      <td>
-        <Center c={AdminColor.white}>
-          <Text>{e.title}</Text>
           </Center>
         </td>
         <td>
-        <Box w={"100%"}>
+          <Box w={200}>
-          <Spoiler c={AdminColor.white} hideLabel="Sembunyikan" maxHeight={70} showLabel="Lihat">
+            <Spoiler
+              c={AdminColor.white}
+              hideLabel="Sembunyikan"
+              maxHeight={70}
+              showLabel="Lihat"
+            >
+              {e.title}
+            </Spoiler>
+          </Box>
+        </td>
+        <td>
+          <Box w={400}>
+            <Spoiler
+              c={AdminColor.white}
+              hideLabel="Sembunyikan"
+              maxHeight={70}
+              showLabel="Lihat"
+            >
               {e.deskripsi}
             </Spoiler>
           </Box>
         </td>
         <td>
-        <Box>
           <Center>
             <Button
+              loaderPosition="center"
+              loading={loading === e.id}
               radius={"xl"}
               bg={"green"}
               color="green"
               onClick={() => {
-                // open();
+                setLoading(e.id);
-                // setGambarId(e.imagesId);
                 router.push(
-                  RouterAdminDonasi.transfer_invoice_reimbursement + e?.imagesId
+                  RouterAdminDonasi.transfer_invoice_reimbursement + e.imageId
                 );
               }}
             >
               Cek
             </Button>
           </Center>
-        </Box>
         </td>
       </tr>
     ));
+  };
+
+  if (!data) return <CustomSkeleton height={400} />;
 
   return (
     <>
-
       <Stack spacing={"xs"} h={"100%"}>
         <ComponentAdminGlobal_TitlePage
           name="Rincian Pencairan Dana"
           color={AdminColor.softBlue}
-          component={
+          // component={
-            <Group>
+          //   <Group>
-              <ActionIcon
+          //     <ActionIcon
-                size={"lg"}
+          //       size={"lg"}
-                radius={"xl"}
+          //       radius={"xl"}
-                variant="light"
+          //       variant="light"
-                onClick={() => {
+          //       onClick={() => {
-                  // onRelaod();
+          //         // onRelaod();
-                }}
+          //       }}
-              >
+          //     >
-                <IconReload />
+          //       <IconReload />
-              </ActionIcon>
+          //     </ActionIcon>
-              {/* <Select
+          //     {/* <Select
-              placeholder="Pilih status"
+          //     placeholder="Pilih status"
-              value={isSelect}
+          //     value={isSelect}
-              data={listMasterStatus.map((e) => ({
+          //     data={listMasterStatus.map((e) => ({
-                value: e.id,
+          //       value: e.id,
-                label: e.name,
+          //       label: e.name,
-              }))}
+          //     }))}
-              onChange={(val) => {
+          //     onChange={(val) => {
-                onSelect(val);
+          //       onSelect(val);
-              }}
+          //     }}
-            /> */}
+          //   /> */}
-            </Group>
+          //   </Group>
-          }
+          // }
         />
 
         <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
           <ScrollArea w={"100%"} h={"90%"}>
-            <Table
+            <Table verticalSpacing={"xl"} horizontalSpacing={"md"} p={"md"}>
-              verticalSpacing={"xl"}
-              horizontalSpacing={"md"}
-              p={"md"}
-              w={1100}
-
-            >
               <thead>
                 <tr>
                   <th>
@@ -118,7 +180,7 @@ function TampilanListPencairan({
                     <Center c={AccentColor.white}>Tanggal</Center>
                   </th>
                   <th>
-                    <Center c={AccentColor.white}>Judul</Center>
+                    <Text c={AccentColor.white}>Judul</Text>
                   </th>
                   <th style={{ color: AccentColor.white }}>Deskripsi</th>
                   <th>
@@ -126,28 +188,21 @@ function TampilanListPencairan({
                   </th>
                 </tr>
               </thead>
-              <tbody>{rowTable}</tbody>
+              <tbody>{rowTable()}</tbody>
             </Table>
           </ScrollArea>
 
-          {/* <Center mt={"xl"}>
+          <Admin_V3_ComponentPaginationBreakpoint
-            <Pagination
+            value={activePage}
-              value={isActivePage}
+            total={nPage}
-              total={isNPage}
             onChange={(val) => {
               onPageClick(val);
             }}
           />
-          </Center> */}
         </Paper>
       </Stack>
-
-
     </>
   );
 }
 
-
 export default TampilanListPencairan;
-
-

src/app_modules/admin/donasi/detail/publish/detail_publish.tsx

@@ -6,12 +6,10 @@ import { Admin_ComponentLoadImageLandscape } from "@/app_modules/admin/_admin_gl
 import CustomSkeletonAdmin from "@/app_modules/admin/_admin_global/_component/skeleton/customSkeletonAdmin";
 import Admin_ComponentBackButton from "@/app_modules/admin/_admin_global/back_button";
 import {
-  MODEL_DONASI,
+  MODEL_DONASI
-  MODEL_DONASI_PENCAIRAN_DANA,
 } from "@/app_modules/donasi/model/interface";
 import { RouterAdminDonasi } from "@/lib/router_admin/router_admin_donasi";
 import { RouterAdminDonasi_OLD } from "@/lib/router_hipmi/router_admin";
-import { clientLogger } from "@/util/clientLogger";
 import {
   Button,
   Center,
@@ -28,20 +26,16 @@ import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import { toNumber } from "lodash";
 import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
-import { apiGetAdminDonasiById } from "../../lib/api_fetch_admin_donasi";
+import {
+  apiGetAdminDonasiById,
+  apiGetAdminDonasiCountDonatur,
+} from "../../lib/api_fetch_admin_donasi";
 import TampilanListDonatur from "./detail_list_donatur";
 import TampilanListPencairan from "./detail_list_pencairan";
 
-export default function AdminDonasi_DetailPublish({
+export default function AdminDonasi_DetailPublish() {
-  countDonatur,
-  listPencairan,
-}: {
-  countDonatur: number;
-  listPencairan: MODEL_DONASI_PENCAIRAN_DANA[];
-}) {
-  const [pencairan, setPencairan] = useState(listPencairan);
-  const [isReload, setReload] = useState(false);
   const params = useParams<{ id: string }>();
+  const [isReload, setReload] = useState(false);
   const [data, setData] = useState<MODEL_DONASI | null>(null);
 
   useShallowEffect(() => {
@@ -61,23 +55,20 @@ export default function AdminDonasi_DetailPublish({
         setData(null);
       }
     } catch (error) {
-      clientLogger.error("Invalid data format recieved:", error);
+      console.error("Invalid data format recieved:", error);
       setData(null);
     }
   };
 
   return (
     <>
-      {/* <pre>{JSON.stringify(pencairan, null, 2)}</pre> */}
       <Stack>
         <>
-          <Admin_ComponentBackButton
+          <Admin_ComponentBackButton path={RouterAdminDonasi.table_publish} />
-            path={RouterAdminDonasi.table_publish}
-          />
           {!data ? (
             <CustomSkeletonAdmin height={"40vh"} />
           ) : (
-            <TampilanDetailDonasi countDonatur={countDonatur} donasi={data} />
+            <TampilanDetailDonasi donasi={data} />
           )}
           {!data ? (
             <CustomSkeletonAdmin height={"80vh"} />
@@ -90,7 +81,7 @@ export default function AdminDonasi_DetailPublish({
               isReload={isReload}
             />
           )}
-          <TampilanListPencairan pencairan={pencairan} />
+          <TampilanListPencairan />
         </>
       </Stack>
     </>
@@ -98,15 +89,34 @@ export default function AdminDonasi_DetailPublish({
 }
 
 function TampilanDetailDonasi({
-  countDonatur,
+  // countDonatur,
   donasi,
 }: {
-  countDonatur: number;
+  // countDonatur: number;
   donasi: MODEL_DONASI;
 }) {
   const [opened, { open, close }] = useDisclosure(false);
   const router = useRouter();
   const [isLoadingPencairanDana, setIsLoadingPencairanDana] = useState(false);
+  const [countDonatur, setCountDonatur] = useState(0);
+
+  useShallowEffect(() => {
+    onLoadData()
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const response = await apiGetAdminDonasiCountDonatur({ id: donasi.id });
+      if (response?.success && response?.data) {
+        setCountDonatur(response.data);
+      } else {
+        setCountDonatur(0);
+      }
+    } catch (error) {
+      console.error("Error get count donatur", error);
+      setCountDonatur(0);
+    }
+  }
 
   return (
     <>
@@ -227,7 +237,7 @@ function TampilanDetailDonasi({
                   </Grid.Col>
                   <Grid.Col span={"auto"}>
                     <Title order={5} c={AdminColor.white}>
-                      {countDonatur}
+                      {countDonatur ? countDonatur : "-"}
                     </Title>
                   </Grid.Col>
                 </Grid>

src/app_modules/admin/donasi/lib/api_fetch_admin_donasi.ts

@@ -5,10 +5,15 @@ export {
   apiGetAdminDonasiKategori,
   apiGetAdminDonasiById,
   apiGetAdminAllDaftarDonatur,
-    apiGetAdminStatusDaftarDonatur
+  apiGetAdminStatusDaftarDonatur,
+  apiGetAdminDonasiCountDonatur,
+  apiGetAdminDonasiPencairan,
 };
-const apiGetAdminDonasiStatusCountDashboard = async ({ name }:
+const apiGetAdminDonasiStatusCountDashboard = async ({
-    { name: "Publish" | "Review" | "Reject" }) => {
+  name,
+}: {
+  name: "Publish" | "Review" | "Reject";
+}) => {
   const { token } = await fetch("/api/get-cookie").then((res) => res.json());
   if (!token) return await token.json().catch(() => null);
 
@@ -19,7 +24,7 @@ const apiGetAdminDonasiStatusCountDashboard = async ({ name }:
       Accept: "application/json",
       "Access-Control-Allow-Origin": "*",
       Authorization: `Bearer ${token}`,
-        }
+    },
   });
   return await response.json().catch(() => null);
 };
@@ -34,24 +39,24 @@ const apiGetAdminDonasiKategoriCountDashboard = async () => {
       "Content-Type": "application/json",
       Accept: "application/json",
       "Access-Control_Allow-Origin": "*",
-            Authorization: `Bearer ${token}`
+      Authorization: `Bearer ${token}`,
-        }
+    },
   });
   return await response.json().catch(() => null);
-}
+};
 
 const apiGetAdminDonasiByStatus = async ({
   name,
   page,
-    search }: {
+  search,
-        name: "Publish" | "Review" | "Reject",
+}: {
+  name: "Publish" | "Review" | "Reject";
   page: string;
   search: string;
-    }) => {
+}) => {
   const { token } = await fetch("/api/get-cookie").then((res) => res.json());
   if (!token) return await token.json().catch(() => null);
 
-
   const isPage = page ? `?page=${page}` : "";
   const isSearch = search ? `&search=${search}` : "";
   const response = await fetch(
@@ -61,30 +66,28 @@ const apiGetAdminDonasiByStatus = async ({
         "Content-Type": "application/json",
         Accept: "application/json",
         "Access-Control-Allow-Origin": "*",
-                Authorization: `Bearer ${token}`
+        Authorization: `Bearer ${token}`,
+      },
     }
-        }
+  );
-    )
 
   return await response.json().catch(() => null);
-}
+};
 const apiGetAdminDonasiKategori = async () => {
   const { token } = await fetch("/api/get-cookie").then((res) => res.json());
   if (!token) return await token.json().catch(() => null);
 
-
   const response = await fetch(`/api/admin/donasi/kategori`, {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
       Accept: "application/json",
       "Access-Control-Allow-Origin": "*",
-            Authorization: `Bearer ${token}`
+      Authorization: `Bearer ${token}`,
-
+    },
-        }
+  });
-    })
   return await response.json().catch(() => null);
-}
+};
 const apiGetAdminDonasiById = async ({ id }: { id: string }) => {
   const { token } = await fetch("/api/get-cookie").then((res) => res.json());
   if (!token) return await token.json().catch(() => null);
@@ -95,19 +98,19 @@ const apiGetAdminDonasiById = async ({ id }: { id: string }) => {
       "Content-Type": "application/json",
       Accept: "application/json",
       "Access-Control-Allow-Origin": "*",
-            Authorization: `Bearer ${token}`
+      Authorization: `Bearer ${token}`,
-        }
+    },
-    })
+  });
   return await response.json().catch(() => null);
-}
+};
 const apiGetAdminAllDaftarDonatur = async ({
   id,
   page,
-    status
+  status,
 }: {
-    id: string,
+  id: string;
-    page: string,
+  page: string;
-    status?: string | undefined
+  status?: string | undefined;
 }) => {
   try {
     const { token } = await fetch("/api/get-cookie").then((res) => res.json());
@@ -133,8 +136,10 @@ const apiGetAdminAllDaftarDonatur = async ({
 
     if (!response.ok) {
       const errorData = await response.json().catch(() => null);
-            console.error("Error get daftar donatur:",
+      console.error(
-                errorData?.message || "Unknown error");
+        "Error get daftar donatur:",
+        errorData?.message || "Unknown error"
+      );
       return null;
     }
 
@@ -143,7 +148,7 @@ const apiGetAdminAllDaftarDonatur = async ({
     console.error("Error get daftar donatur:", error);
     throw error;
   }
-}
+};
 
 const apiGetAdminStatusDaftarDonatur = async () => {
   const { token } = await fetch("/api/get-cookie").then((res) => res.json());
@@ -155,9 +160,78 @@ const apiGetAdminStatusDaftarDonatur = async () => {
       "Content-Type": "application/json",
       Accept: "application/json",
       "Access-Control-Allow-Origin": "*",
-            Authorization: `Bearer ${token}`
+      Authorization: `Bearer ${token}`,
-        }
+    },
-    })
+  });
 
   return await response.json().catch(() => null);
-}
+};
+
+const apiGetAdminDonasiCountDonatur = async ({ id }: { id: string }) => {
+  try {
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) return await token.json().catch(() => null);
+
+    const response = await fetch(`/api/admin/donasi/${id}/count`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      console.error(
+        "Error get count donatur:",
+        errorData?.message || "Unknown error"
+      );
+      return null;
+    }
+    const data = await response.json().catch(() => null);
+    return data;
+  } catch (error) {
+    console.error("Error get count donatur:", error);
+    throw error;
+  }
+};
+
+const apiGetAdminDonasiPencairan = async ({
+  id,
+  page,
+}: {
+  id: string;
+  page: string;
+}) => {
+  try {
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) return await token.json().catch(() => null);
+
+    const response = await fetch(
+      `/api/admin/donasi/${id}/pencairan?page=${page}`,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      console.error(
+        "Error get pencairan donasi:",
+        errorData?.message || "Unknown error"
+      );
+      return null;
+    }
+    const data = await response.json().catch(() => null);
+    return data;
+  } catch (error) {
+    console.error("Error get pencairan donasi:", error);
+    throw error;
+  }
+};

src/app_modules/admin/donasi/sub-detail/bukti_transfer_pencairan.tsx

@@ -1,9 +1,7 @@
 "use client";
 
-import { AspectRatio, Box, Image, Paper, Stack } from "@mantine/core";
+import { Stack } from "@mantine/core";
-import Admin_ComponentBackButton from "../../_admin_global/back_button";
+import { Admin_ComponentPreviewImageAdmin } from "../../_admin_global/comp_preview_image_admin";
-import { RouterAdminDonasi_OLD } from "@/lib/router_hipmi/router_admin";
-import { RouterDonasi } from "@/lib/router_hipmi/router_donasi";
 
 export default function AdminDonasi_BuktiTransferPencairan({
   imageId,
@@ -13,36 +11,8 @@ export default function AdminDonasi_BuktiTransferPencairan({
   return (
     <>
       <Stack>
-        <Admin_ComponentBackButton />
+        <Admin_ComponentPreviewImageAdmin fileId={imageId} />
-        <BuktiTransfer imageId={imageId} />
       </Stack>
     </>
   );
 }
-
-function BuktiTransfer({ imageId }: { imageId: string }) {
-  return (
-    <>
-      <Paper withBorder p={"lg"} bg={"gray.3"}>
-        <AspectRatio ratio={2 / 1} mx="auto">
-          <Image
-            alt="Foto"
-            src={RouterDonasi.api_gambar_pencairan + `${imageId}`}
-          />
-        </AspectRatio>
-        {/* <AspectRatio ratio={1 / 1} mah={500} p={"lg"} bg={"cyan"}>
-          <Paper bg={"grape"} h={"100%"}>
-            <Image
-            //   height={500}
-            //   width={"100%"}
-              alt="Foto"
-              src={
-                RouterAdminDonasi_OLD.api_gambar_bukti_transfer + `${imageId}`
-              }
-            />
-          </Paper>
-        </AspectRatio> */}
-      </Paper>
-    </>
-  );
-}