fix : donasi

deksripsi:
- mengant use server menjadi api
src/app/api/donasi/[id]/invoice/count/route.ts
src/app/api/donasi/[id]/invoice/route.ts
src/app/api/donasi/kabar/[id]/route.ts
src/app/dev/(user)/donasi/cerita_penggalang/[id]/layout.tsx
src/app/dev/(user)/donasi/cerita_penggalang/[id]/page.tsx
src/app/dev/(user)/donasi/detail/donasi_saya/[id]/page.tsx
src/app/dev/(user)/donasi/detail/kabar/[id]/page.tsx
src/app/dev/(user)/donasi/proses_donasi/invoice/[id]/page.tsx
src/app_modules/admin/donasi/detail/publish/detail_list_donatur.tsx
src/app_modules/admin/donasi/fun/update/fun_update_status_dan_total.ts
src/app_modules/donasi/detail/detail_donasi_saya/index.tsx
src/app_modules/donasi/detail/detail_kabar/index.tsx
src/app_modules/donasi/detail/detail_main/cerita_penggalang/layout.tsx
src/app_modules/donasi/lib/api_donasi.ts
src/app_modules/donasi/proses_donasi/invoice/index.tsx

No Issue

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

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

src/app/api/donasi/[id]/invoice/route.ts

@@ -0,0 +1,71 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib";
+
+export async function GET(
+  request: Request,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const { id } = params;
+    const data = await prisma.donasi_Invoice.findFirst({
+      where: {
+        id: id,
+      },
+      select: {
+        id: true,
+        nominal: true,
+        donasiId: true,
+        createdAt: true,
+        donasiMaster_BankId: true,
+        donasiMaster_StatusInvoiceId: true,
+        Donasi: {
+          select: {
+            id: true,
+            title: true,
+            target: true,
+            active: true,
+            createdAt: true,
+            updatedAt: true,
+            publishTime: true,
+            catatan: true,
+            progres: true,
+            terkumpul: true,
+            authorId: true,
+            imagesId: true,
+            donasiMaster_KategoriId: true,
+            donasiMaster_DurasiId: true,
+            donasiMaster_StatusDonasiId: true,
+            Author: true,
+            imageDonasi: true,
+            CeritaDonasi: true,
+            DonasiMaster_Ketegori: true,
+            DonasiMaster_Durasi: true,
+            DonasiMaster_Status: true,
+            imageId: true,
+          },
+        },
+        DonasiMaster_Bank: true,
+        DonasiMaster_StatusInvoice: true,
+      },
+    });
+
+    if (!data) {
+      return NextResponse.json({
+        success: false,
+        message: "Data tidak ditemukan",
+      });
+    }
+
+    return NextResponse.json({
+      success: true,
+      message: "Data berhasil diambil",
+      data: data,
+    });
+  } catch (error) {
+    return NextResponse.json({
+      success: false,
+      message: "Terjadi kesalahan saat mengambil data",
+      reason: (error as Error).message || error,
+    });
+  }
+}

src/app/api/donasi/kabar/[id]/route.ts

@@ -0,0 +1,28 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib";
+
+export async function GET(
+  request: Request,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const { id } = params;
+    const data = await prisma.donasi_Kabar.findFirst({
+      where: {
+        id: id,
+      },
+    });
+
+    return NextResponse.json({
+      success: true,
+      message: "Data berhasil diambil",
+      data: data,
+    });
+  } catch (error) {
+    return NextResponse.json({
+      success: false,
+      message: "Terjadi kesalahan saat mengambil data",
+      reason: error as Error,
+    });
+  }
+}

src/app/dev/(user)/donasi/cerita_penggalang/[id]/layout.tsx

@@ -4,18 +4,12 @@ import React from "react";
 
 export default async function Layout({
   children,
-  params,
 }: {
   children: React.ReactNode;
-  params: { id: string };
 }) {
-  const dataDonasi = await Donasi_getOneById(params.id);
-  const statusDonasiId = dataDonasi?.donasiMaster_StatusDonasiId;
   return (
     <>
-      <LayoutCeritaPenggalangDonasi statusDonasiId={statusDonasiId as string} donasiId={dataDonasi?.id as string}>
+      <LayoutCeritaPenggalangDonasi>{children}</LayoutCeritaPenggalangDonasi>
-        {children}
-      </LayoutCeritaPenggalangDonasi>
     </>
   );
 }

src/app/dev/(user)/donasi/cerita_penggalang/[id]/page.tsx

@@ -1,8 +1,6 @@
 import { CeritaPenggalangDonasi } from "@/app_modules/donasi";
-import Donasi_getCeritaByDonasiId from "@/app_modules/donasi/fun/get/get_cerita_penggalang";
 
 export default async function Page() {
-  // const dataCerita = await Donasi_getCeritaByDonasiId(params.id);
   return (
     <>
       <CeritaPenggalangDonasi />

src/app/dev/(user)/donasi/detail/donasi_saya/[id]/page.tsx

@@ -1,21 +1,9 @@
 import { DetailDonasiSaya } from "@/app_modules/donasi";
-import { Donasi_getCountDonatur } from "@/app_modules/donasi/fun/count/get_count_donatur";
-import { Donasi_getOneById } from "@/app_modules/donasi/fun/get/get_one_donasi_by_id";
-import { Donasi_getOneInvoiceById } from "@/app_modules/donasi/fun/get/get_one_invoice_by_id";
-
-export default async function Page({ params }: { params: { id: string } }) {
-  let invoiceId = params.id;
-  const dataDonasi = await Donasi_getOneInvoiceById(invoiceId);
-  const countDonatur = await Donasi_getCountDonatur(
-    dataDonasi?.donasiId as any
-  );
 
+export default async function Page() {
   return (
     <>
-      <DetailDonasiSaya
+      <DetailDonasiSaya />
-        dataDonasi={dataDonasi as any}
-        countDonatur={countDonatur}
-      />
     </>
   );
 }

src/app/dev/(user)/donasi/detail/kabar/[id]/page.tsx

@@ -2,9 +2,5 @@ import { DetailKabarDonasi } from "@/app_modules/donasi";
 import { Donasi_getOneKabar } from "@/app_modules/donasi/fun/get/get_one_kabar";
 
 export default async function Page({params}: {params: {id: string}}) {
-
+    return <DetailKabarDonasi />
-    let kabarId = params.id
-    const dataDonasi = await Donasi_getOneKabar(kabarId)
-
-    return <DetailKabarDonasi dataDonasi={dataDonasi as any}/>
 }

src/app/dev/(user)/donasi/proses_donasi/invoice/[id]/page.tsx

@@ -1,9 +1,5 @@
 import { Donasi_InvoiceProses } from "@/app_modules/donasi";
-import { Donasi_getOneInvoiceById } from "@/app_modules/donasi/fun/get/get_one_invoice_by_id";
 
-export default async function Page({ params }: { params: { id: string } }) {
+export default async function Page() {
-  let invoiceId = params.id;
+  return <Donasi_InvoiceProses />;
-  const dataInvoice = await Donasi_getOneInvoiceById(invoiceId);
-
-  return <Donasi_InvoiceProses dataInvoice={dataInvoice as any} />;
 }

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

@@ -4,6 +4,7 @@ import { ComponentGlobal_TampilanRupiah } from "@/app_modules/_global/component"
 import { apiGetMasterStatusTransaksi } from "@/app_modules/_global/lib/api_fetch_master";
 import { globalStatusTransaksi } from "@/app_modules/_global/lib/master_list_app";
 import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
+import { Admin_ComponentModal } from "@/app_modules/admin/_admin_global/_component/comp_admin_modal";
 import CustomSkeletonAdmin from "@/app_modules/admin/_admin_global/_component/skeleton/customSkeletonAdmin";
 import { ComponentAdminGlobal_NotifikasiBerhasil } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_berhasil";
 import { ComponentAdminGlobal_NotifikasiGagal } from "@/app_modules/admin/_admin_global/admin_notifikasi/notifikasi_gagal";
@@ -19,7 +20,6 @@ import {
   Button,
   Center,
   Group,
-  Modal,
   Paper,
   ScrollArea,
   Select,
@@ -34,6 +34,7 @@ import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import adminDonasi_funUpdateStatusDanTotal from "../../fun/update/fun_update_status_dan_total";
 import { apiGetAdminAllDaftarDonatur } from "../../lib/api_fetch_admin_donasi";
+import mqtt_client from "@/util/mqtt_client";
 
 function TampilanListDonatur({
   setReloadDonasi,
@@ -334,7 +335,7 @@ function ButtonAccept({
   onSuccessDonatur: (val: any) => void;
   isReload: boolean;
 }) {
-  const [opened, { open, close }] = useDisclosure(false);
+  const [opened, setOpened] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
   async function onAccept() {
@@ -343,79 +344,84 @@ function ButtonAccept({
     setIsLoading(true);
     isReload;
 
-    const updateStatus = await adminDonasi_funUpdateStatusDanTotal({
+    try {
-      invoiceId: invoiceId,
+      const updateStatus = await adminDonasi_funUpdateStatusDanTotal({
-      donasiId: donasiId,
+        invoiceId: invoiceId,
-      jumlahTerkumpul: jumlahTerkumpul,
+        donasiId: donasiId,
-      nominal: nominalDonasi,
+        jumlahTerkumpul: jumlahTerkumpul,
-      target: target,
+        nominal: nominalDonasi,
-      statusInvoiceId: "1",
+        target: target,
-    });
+        statusInvoiceId: "1",
-
-    if (updateStatus.status == 200) {
-      const dataNotif = {
-        appId: updateStatus.data?.id,
-        userId: updateStatus.data?.authorId,
-        pesan: updateStatus.data?.Donasi?.title,
-        status: updateStatus.data?.DonasiMaster_StatusInvoice?.name,
-        kategoriApp: "DONASI",
-        title: "Terimakasih, Donasi anda telah diterima",
-      };
-
-      const notif = await adminNotifikasi_funCreateToUser({
-        data: dataNotif as any,
       });
 
-      if (notif.status === 201) {
+      if (updateStatus.status === 200) {
-        mqtt_client.publish(
+        const dataNotif = {
-          "USER",
+          appId: updateStatus.data?.id,
-          JSON.stringify({ userId: updateStatus?.data?.authorId, count: 1 })
+          userId: updateStatus.data?.authorId,
-        );
+          pesan: updateStatus.data?.Donasi?.title,
+          status: updateStatus.data?.DonasiMaster_StatusInvoice?.name,
+          kategoriApp: "DONASI",
+          title: "Terimakasih, Donasi anda telah diterima",
+        };
 
-        mqtt_client.publish(
+        const notif = await adminNotifikasi_funCreateToUser({
-          "donasi_invoice",
+          data: dataNotif as any,
-          JSON.stringify({
+        });
-            invoiceId: invoiceId,
+
-            statusInvoiceId: "1",
+        if (notif.status === 201) {
-          })
+          mqtt_client.publish(
-        );
+            "USER",
+            JSON.stringify({ userId: updateStatus?.data?.authorId, count: 1 })
+          );
+
+          mqtt_client.publish(
+            "donasi_invoice",
+            JSON.stringify({
+              invoiceId: invoiceId,
+              statusInvoiceId: "1",
+            })
+          );
+        }
+
+        const dataNotifToAuthorDonasi = {
+          appId: updateStatus.data?.Donasi?.id,
+          userId: updateStatus.data?.Donasi?.authorId,
+          pesan: updateStatus.data?.Donasi?.title,
+          status: "Donatur Baru",
+          kategoriApp: "DONASI",
+          title: "Ada donatur baru",
+        };
+
+        const notifToAuthorDonasi = await adminNotifikasi_funCreateToUser({
+          data: dataNotifToAuthorDonasi as any,
+        });
+
+        if (notifToAuthorDonasi.status === 201) {
+          mqtt_client.publish(
+            "USER",
+            JSON.stringify({
+              userId: updateStatus?.data?.Donasi?.authorId,
+              count: 1,
+            })
+          );
+        }
+
+        // const updateData = await AdminDonasi_getOneById(donasiId);
+        // onSuccessDonasi(updateData as any);
+        // const updatelistDonatur = await adminDonasi_getListDonatur({
+        //   donasiId: donasiId,
+        //   page: 1,
+        // });
+        setOpened(false);
+        onSuccessDonasi(true);
+        ComponentAdminGlobal_NotifikasiBerhasil(updateStatus.message);
+        setIsLoading(false);
+      } else {
+        ComponentAdminGlobal_NotifikasiGagal(updateStatus.message);
+        setIsLoading(false);
       }
-
+    } catch (error) {
-      const dataNotifToAuthorDonasi = {
+      console.error("Error update status invoice", error);
-        appId: updateStatus.data?.Donasi?.id,
-        userId: updateStatus.data?.Donasi?.authorId,
-        pesan: updateStatus.data?.Donasi?.title,
-        status: "Donatur Baru",
-        kategoriApp: "DONASI",
-        title: "Ada donatur baru",
-      };
-
-      const notifToAuthorDonasi = await adminNotifikasi_funCreateToUser({
-        data: dataNotifToAuthorDonasi as any,
-      });
-
-      if (notifToAuthorDonasi.status === 201) {
-        mqtt_client.publish(
-          "USER",
-          JSON.stringify({
-            userId: updateStatus?.data?.Donasi?.authorId,
-            count: 1,
-          })
-        );
-      }
-
-      // const updateData = await AdminDonasi_getOneById(donasiId);
-      // onSuccessDonasi(updateData as any);
-      // const updatelistDonatur = await adminDonasi_getListDonatur({
-      //   donasiId: donasiId,
-      //   page: 1,
-      // });
-      onSuccessDonasi(true);
-      ComponentAdminGlobal_NotifikasiBerhasil(updateStatus.message);
-      setIsLoading(false);
-      close();
-    } else {
-      ComponentAdminGlobal_NotifikasiGagal(updateStatus.message);
       setIsLoading(false);
     }
   }
@@ -426,38 +432,49 @@ function ButtonAccept({
         color="green"
         radius={"xl"}
         onClick={() => {
-          open();
+          setOpened(true);
         }}
       >
         Terima
       </Button>
 
-      <Modal opened={opened} onClose={close} centered withCloseButton={false}>
+      <Admin_ComponentModal
-        <Paper>
+        opened={opened}
-          <Stack align="center">
+        onClose={() => {
-            <Title
+          setOpened(false);
-              align="center"
+        }}
-              order={6}
+        // title="Terima Donasi"
-            >{`${"Anda sudah melihat bukti transfer dan yakin menerima donasi ini ?"}`}</Title>
+        size="sm"
-            <Group position="center">
+        withCloseButton={false}
-              <Button radius={"xl"} onClick={() => close()}>
+      >
-                Batal
+        <Stack align="center">
-              </Button>
+          <Title
-              <Button
+            c={AdminColor.white}
-                color="green"
+            align="center"
-                loading={isLoading}
+            order={6}
-                loaderPosition="center"
+          >{`${"Anda sudah melihat bukti transfer dan yakin menerima donasi ini ?"}`}</Title>
-                radius={"xl"}
+          <Group position="center">
-                onClick={() => {
+            <Button radius={"xl"} onClick={() => setOpened(false)}>
-                  onAccept();
+              Batal
-                }}
+            </Button>
-              >
+            <Button
-                Terima
+              color="green"
-              </Button>
+              loading={isLoading}
-            </Group>
+              loaderPosition="center"
-          </Stack>
+              radius={"xl"}
-        </Paper>
+              onClick={() => {
-      </Modal>
+                onAccept();
+              }}
+            >
+              Terima
+            </Button>
+          </Group>
+        </Stack>
+      </Admin_ComponentModal>
+
+      {/* <Modal opened={opened} onClose={close} centered withCloseButton={false}>
+       
+      </Modal> */}
     </>
   );
 }

src/app_modules/admin/donasi/fun/update/fun_update_status_dan_total.ts

@@ -22,11 +22,11 @@ export default async function adminDonasi_funUpdateStatusDanTotal({
 }) {
   let totalNominal = nominal + jumlahTerkumpul;
   const progres = (totalNominal / target) * 100;
-  console.log("Progres", progres)
+  // console.log("Progres", progres)
-  console.log("Jumlah total nominal", typeof totalNominal)
+  // console.log("Jumlah total nominal", typeof totalNominal)
-  console.log("Ini nominal", nominal)
+  // console.log("Ini nominal", nominal)
-  console.log("Ini jumlah terkumpul", jumlahTerkumpul)
+  // console.log("Ini jumlah terkumpul", jumlahTerkumpul)
-  console.log("Ini target", target)
+  // console.log("Ini target", target)
 
   const updateInvoice = await prisma.donasi_Invoice.update({
     where: {
@@ -43,7 +43,6 @@ export default async function adminDonasi_funUpdateStatusDanTotal({
           id: true,
           title: true,
           authorId: true,
-          
         },
       },
       DonasiMaster_StatusInvoice: {
@@ -53,7 +52,7 @@ export default async function adminDonasi_funUpdateStatusDanTotal({
       },
     },
   });
-  console.log("Jumlah update invoice", updateInvoice)
+  // console.log("Jumlah update invoice", updateInvoice);
 
   if (!updateInvoice) return { status: 400, message: "Update invoice gagal" };
 
@@ -66,7 +65,7 @@ export default async function adminDonasi_funUpdateStatusDanTotal({
       progres: "" + progres,
     },
   });
-  console.log("Jumlah update donasi", updateDonasi)
+  // console.log("Jumlah update donasi", updateDonasi)
 
   if (!updateDonasi) return { status: 400, message: "Update donasi gagal" };
   revalidatePath(RouterAdminDonasi_OLD.detail_publish + donasiId);

src/app_modules/donasi/detail/detail_donasi_saya/index.tsx

@@ -8,15 +8,48 @@ import ComponentDonasi_InformasiPenggalangMain from "../../component/detail_main
 import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
 import { MODEL_DONASI_INVOICE } from "../../model/interface";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { useShallowEffect } from "@mantine/hooks";
+import { useParams } from "next/navigation";
+import { apiGetCountDonatur, apiGetDonasiInvoiceById } from "../../lib/api_donasi";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+
+export default function DetailDonasiSaya() {
+  const params = useParams<{ id: string }>();
+  const invoiceId = params.id;
+  const [invoice, setInvoice] = useState<MODEL_DONASI_INVOICE | null>(null);
+  const [countDonatur, setCountDonatur] = useState<number | null>(null);
+
+  useShallowEffect(() => {
+    onLoadData();
+    getCountDonatur();
+  }, [invoiceId]);
+
+  async function onLoadData() {
+    try {
+      const response = await apiGetDonasiInvoiceById({ id: invoiceId });
+      if (response.success) {
+        setInvoice(response.data);
+      }
+    } catch (error) {
+      console.error("Error fetching invoice data:", error);
+    }
+  }
+
+  async function getCountDonatur() {
+    try {
+      const response = await apiGetCountDonatur({ id: invoiceId });
+      if (response.success) {
+        setCountDonatur(response.data);
+      }
+    } catch (error) {
+      console.error("Error fetching count donatur data:", error);
+    }
+  }
+
+  if (!invoice || countDonatur === null) {
+    return <CustomSkeleton height={400} />;
+  }
 
-export default function DetailDonasiSaya({
-  dataDonasi,
-  countDonatur,
-}: {
-  dataDonasi: MODEL_DONASI_INVOICE;
-  countDonatur: number;
-}) {
-  const [invoice, setInvoice] = useState(dataDonasi);
   return (
     <>
       <Stack pb={"lg"}>

src/app_modules/donasi/detail/detail_kabar/index.tsx

@@ -7,13 +7,34 @@ import {
 import { Group, Stack, Text, Title } from "@mantine/core";
 import { useState } from "react";
 import { MODEL_DONASI_KABAR } from "../../model/interface";
+import { apiGetDonasiKabarById } from "../../lib/api_donasi";
+import { useParams } from "next/navigation";
+import { useShallowEffect } from "@mantine/hooks";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+
+export default function DetailKabarDonasi() {
+  const param = useParams<{ id: string }>();
+  const [kabar, setKabar] = useState<MODEL_DONASI_KABAR | null>(null);
+
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const response = await apiGetDonasiKabarById({ id: param.id });
+      if (response.success) {
+        setKabar(response.data);
+      }
+    } catch (error) {
+      console.error("Error fetching kabar data:", error);
+    }
+  }
+
+  if (!kabar) {
+    return <CustomSkeleton />;
+  }
 
-export default function DetailKabarDonasi({
-  dataDonasi,
-}: {
-  dataDonasi: MODEL_DONASI_KABAR;
-}) {
-  const [kabar, setKabar] = useState(dataDonasi);
   return (
     <>
       <ComponentGlobal_CardStyles>

src/app_modules/donasi/detail/detail_main/cerita_penggalang/layout.tsx

@@ -6,55 +6,76 @@ import UI_NewLayoutTamplate, {
   UI_NewFooter,
   UI_NewHeader,
 } from "@/app_modules/_global/ui/V2_layout_tamplate";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import ButtonDonasi from "@/app_modules/donasi/component/footer_button_donasi";
-import React from "react";
+import { apiGetOneDonasiById } from "@/app_modules/donasi/lib/api_donasi";
+import { MODEL_DONASI } from "@/app_modules/donasi/model/interface";
+import { useShallowEffect } from "@mantine/hooks";
+import { useParams } from "next/navigation";
+import React, { useState } from "react";
 
 export default function LayoutCeritaPenggalangDonasi({
   children,
-  statusDonasiId,
-  donasiId,
 }: {
   children: React.ReactNode;
-  statusDonasiId: string;
-  donasiId: string;
 }) {
-  if (statusDonasiId !== "1") {
+  const param = useParams<{ id: string }>();
-    return (
+  const [data, setData] = useState({} as MODEL_DONASI);
-      <>
+  const [loading, setLoading] = useState(true);
-        {/* <UIGlobal_LayoutTamplate
-          header={
-            <UIGlobal_LayoutHeaderTamplate title="Cerita Penggalang Dana" />
-          }
-        >
-          {children}
-        </UIGlobal_LayoutTamplate> */}
 
-        <UI_NewLayoutTamplate>
+  useShallowEffect(() => {
-          <UI_NewHeader>
+    getData();
-            <Component_Header title="Cerita Penggalang Dana" />
+  }, []);
-          </UI_NewHeader>
+
-          <UI_NewChildren>{children}</UI_NewChildren>
+  async function getData() {
-        </UI_NewLayoutTamplate>
+    try {
-      </>
+      setLoading(true);
-    );
+      const response = await apiGetOneDonasiById(param.id, "semua");
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
   }
 
-  return (
+  // if (data?.donasiMaster_StatusDonasiId !== "1") {
-    // <UIGlobal_LayoutTamplate
+  //   return (
-    //   header={<UIGlobal_LayoutHeaderTamplate title="Cerita Penggalang Dana" />}
+  //     <>
-    //   footer={<ButtonDonasi donasiId={donasiId} />}
+  //       <UI_NewLayoutTamplate>
-    // >
+  //         <UI_NewHeader>
-    //   {children}
+  //           <Component_Header title="Cerita Penggalang Dana" />
-    // </UIGlobal_LayoutTamplate>
+  //         </UI_NewHeader>
+  //         <UI_NewChildren>{children}</UI_NewChildren>
+  //       </UI_NewLayoutTamplate>
+  //     </>
+  //   );
+  // }
 
+  return (
     <UI_NewLayoutTamplate>
       <UI_NewHeader>
         <Component_Header title="Cerita Penggalang Dana" />
       </UI_NewHeader>
-      <UI_NewChildren>{children}</UI_NewChildren>
+      <UI_NewChildren>
-      <UI_NewFooter>
+        {loading ? (
-        <ButtonDonasi donasiId={donasiId} />
+          <CustomSkeleton height={400} />
-      </UI_NewFooter>
+        ) : (
+          data?.donasiMaster_StatusDonasiId === "1" ? (
+            children
+          ) : (
+            <CustomSkeleton height={400} />
+          )
+        )}
+      </UI_NewChildren>
+      {data?.donasiMaster_StatusDonasiId === "1" && (
+        <UI_NewFooter>
+          <ButtonDonasi donasiId={data?.id as string} />
+        </UI_NewFooter>
+      )}
     </UI_NewLayoutTamplate>
   );
 }

src/app_modules/donasi/lib/api_donasi.ts

@@ -119,12 +119,12 @@ export const apiGetTemporaryCreate = async ({ id }: { id: string }) => {
     if (!response.ok) {
       const errorData = await response.json().catch(() => null);
       console.error(
-        "Failed to get donasi cerita penggalang",
+        "Failed to get donasi temporary create",
         response.statusText,
         errorData
       );
       throw new Error(
-        errorData?.message || "Failed to get donasi cerita penggalang"
+        errorData?.message || "Failed to get donasi temporary create"
       );
     }
 
@@ -132,7 +132,120 @@ export const apiGetTemporaryCreate = async ({ id }: { id: string }) => {
     const data = await response.json();
     return data;
   } catch (error) {
-    console.error("Error get donasi cerita penggalang", error);
+    console.error("Error get donasi temporary create", error);
     throw error; // Re-throw the error to handle it in the calling function
   }
 };
+
+export const apiGetDonasiInvoiceById = async ({ id }: { id: string }) => {
+  try {
+    // Fetch token from cookie
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) {
+      console.error("No token found");
+      return null;
+    }
+
+    const response = await fetch(`/api/donasi/${id}/invoice`, {
+      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(
+        "Failed to get donasi invoice",
+        response.statusText,
+        errorData
+      );
+      throw new Error(errorData?.message || "Failed to get donasi invoice");
+    }
+
+    // Return the JSON response
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error get donasi invoice", error);
+    throw error; // Re-throw the error to handle it in the calling function
+  }
+};
+
+export const apiGetCountDonatur = async ({ id }: { id: string }) => {
+  try {
+    // Fetch token from cookie
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) {
+      console.error("No token found");
+      return null;
+    }
+
+    const response = await fetch(`/api/donasi/${id}/invoice/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(
+        "Failed to get donasi invoice count",
+        response.statusText,
+        errorData
+      );
+      throw new Error(
+        errorData?.message || "Failed to get donasi invoice count"
+      );
+    }
+
+    // Return the JSON response
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error get donasi invoice count", error);
+    throw error; // Re-throw the error to handle it in the calling function
+  }
+};
+
+export const apiGetDonasiKabarById = async ({ id }: { id: string }) => {
+    try {
+      // Fetch token from cookie
+      const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+      if (!token) {
+        console.error("No token found");
+        return null;
+      }
+
+      const response = await fetch(`/api/donasi/kabar/${id}`, {
+        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(
+          "Failed to get donasi kabar",
+          response.statusText,
+          errorData
+        );
+        throw new Error(errorData?.message || "Failed to get donasi kabar");
+      }
+
+      // Return the JSON response
+      const data = await response.json();
+      return data;
+    } catch (error) {
+      console.error("Error get donasi kabar", error);
+      throw error; // Re-throw the error to handle it in the calling function
+    }
+  };

src/app_modules/donasi/proses_donasi/invoice/index.tsx

@@ -1,52 +1,65 @@
 "use client";
 
-import { DIRECTORY_ID } from "@/lib";
-import { IRealtimeData } from "@/lib/global_state";
-import { RouterDonasi } from "@/lib/router_hipmi/router_donasi";
 import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_ButtonUploadFileImage } from "@/app_modules/_global/component";
 import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
+import { DIRECTORY_ID } from "@/lib";
+import { IRealtimeData } from "@/lib/global_state";
+import { RouterDonasi } from "@/lib/router_hipmi/router_donasi";
 import {
   Button,
   Center,
   CopyButton,
-  FileButton,
   Grid,
   Group,
   Paper,
   Stack,
   Text,
-  Title,
+  Title
 } from "@mantine/core";
-import { IconCamera, IconCircleCheck } from "@tabler/icons-react";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconCircleCheck } from "@tabler/icons-react";
 import { useAtom } from "jotai";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import { WibuRealtime } from "wibu-pkg";
 import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
 import { Donasi_funUpdateStatusInvoice } from "../../fun/update/fun_update_status_invoice";
 import { gs_donasi_hot_menu } from "../../global_state";
+import { apiGetDonasiInvoiceById } from "../../lib/api_donasi";
 import { MODEL_DONASI_INVOICE } from "../../model/interface";
-import { clientLogger } from "@/util/clientLogger";
-import { ComponentGlobal_ButtonUploadFileImage } from "@/app_modules/_global/component";
 
-export default function Donasi_InvoiceProses({
+export default function Donasi_InvoiceProses() {
-  dataInvoice,
+  const param = useParams<{ id: string }>();
-}: {
+  const [invoice, setDataInvoice] = useState<MODEL_DONASI_INVOICE | null>(null);
-  dataInvoice: MODEL_DONASI_INVOICE;
-}) {
-  const [invoice, setDataInvoice] = useState(dataInvoice);
   const router = useRouter();
   const [file, setFile] = useState<File | null>(null);
   const [active, setActive] = useAtom(gs_donasi_hot_menu);
   const [isLoading, setLoading] = useState(false);
 
+  useShallowEffect(() => {
+    onLoadInvoice();
+  }, []);
+
+  async function onLoadInvoice() {
+    try {
+      const response = await apiGetDonasiInvoiceById({ id: param.id });
+      if (response.success) {
+        setDataInvoice(response.data);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
   async function onClick() {
     try {
       setLoading(true);
@@ -62,7 +75,7 @@ export default function Donasi_InvoiceProses({
       }
 
       const res = await Donasi_funUpdateStatusInvoice({
-        invoiceId: invoice.id,
+        invoiceId: invoice?.id as any,
         statusId: "2",
         fileId: uploadImage.data.id,
       });
@@ -88,7 +101,7 @@ export default function Donasi_InvoiceProses({
 
           ComponentGlobal_NotifikasiBerhasil(res.message);
           setActive(2);
-          router.push(RouterDonasi.proses_transaksi + `${invoice.id}`);
+          router.push(RouterDonasi.proses_transaksi + `${invoice?.id}`);
         }
       } else {
         ComponentGlobal_NotifikasiGagal(res.message);
@@ -96,10 +109,14 @@ export default function Donasi_InvoiceProses({
       }
     } catch (error) {
       setLoading(false);
-      clientLogger.error("Error upload data invoice", error);
+      console.error("Error upload data invoice", error);
     }
   }
 
+  if (!invoice) {
+    return <CustomSkeleton height={400} />;
+  }
+
   return (
     <>
       <Stack spacing={"lg"} py={"md"}>